ReactJs避免在子输入时重新呈现

如何解决ReactJs避免在子输入时重新呈现

最近，我开始更多地进入设计模式，只是重用组件而不是编写冗长的代码。

目前，我正在尝试减少表单的长度并创建一个“行”组件。

BUILD_TYPE := cmake
.DEFAULT_GOAL := default
FULL_PATH := $(shell readlink -f './build')
DIR_NAME := $(shell basename $(shell pwd))
LINKER_TYPE := none
include ../makefile.mk

然后在渲染器上我以这种方式调用它：

 function FormRows({ x,w,z,Input1,Input2,Input3 }) {
        return (
            <div className={"row"}>
                <div className="col text-left">
                    <span style={{ fontSize: '12px' }}>{x}</span>
                </div>
                <div className="col text-left">
                    {Input1}
                </div>
                <div className="col text-left">
                    <span style={{ fontSize: '12px' }}>{w}</span>
                </div>
                <div className="col text-left">
                    {Input2 ? Input2 : ''}
                </div>
                <div className="col text-left">
                    <span style={{ fontSize: '12px' }}>{z}</span>
                </div>
                <div className="col text-left">
                    {Input3}
                </div>
                <div className="col-2"></div>
            </div>
        )
    }

问题在于它会在每个onChange事件上重新呈现，因此不会在State：s中存储任何值

任何提示如何解决此问题？

编辑：我忘了提。输入组件从另一个文件导出，并具有以下代码：

<FormRows
  x={'Visma Kortnamn'}
  w={'synas'}
  Input1={
    <Input
      placeholder={'Visma Kortnamn'}
      onChange={setVKortnamn}
    />
  }
  Input2={
    <Select
      onchange={setSynas}
      options={trueOrFalse.map((k,i) => {
       return (<option key={i} value={k}>{k}</option>)
      })}
    />
  }
/>