Reactjs 反应-<；输入>；值未在onChange事件上更新

我有一个包含动态构建的控制器（

输入

，

下拉

，

文本区域

，…）的模式

我试图实现

Input

controller

onChange

方法的一种行为，一旦用户在其中键入内容，就会更新输入中的值。 （我试过使用简单的html

input

和其他一些库

input

，比如ant design，但行为相同）

为此，我为每个输入控制器设置了一个名称，并将事件发送到

onChange

，然后使用

setState

设置一个状态变量，其中包含控制器名称及其值：

else if（element.Type==TEXT）{
const inputName=element.Name.toLowerCase（）.replace（“，”）；
this.setState（{[inputName]：element.Value}，（）=>
元素。推(
{element.Name}

{
此.onInputValueChange（e）
this.onInputChange（element.Id、element.Name、e.target.value）
}}
/>
))
}
onInputValueChange（e）{
const name=e.target.name
这是我的国家({
[e.target.name]：e.target.value
}, () => {
console.log（this.state[name]）；
});
}

问题是屏幕上没有反映出变化。 原因可能是什么？

setState

是一个异步动作，这是事实吗

---

要复制，您可以使用此选项（在文本框中键入内容）

问题在于您正在呈现处于状态的组件。 您可以将输入设置为状态，以数组形式呈现，并围绕html进行包装。编辑某些输入值时，您正在更新状态，但不更新输入数组。此数组中的某些值会更改，但包含此数组的状态不会更改->此状态不会重新呈现，也不会显示更改

解决此问题的简单方法是通过删除

value={this.state[inputName]}

将输入从

controled

转换为

uncontrolled

字段。您将能够使用

this.state[inputName]

获取值，但您不再告诉输入它应该包含什么内容（例如，这意味着您无法为电话号码输入

+33 1 00 00 00

而不是默认的

+3310000000

解析这样的数据

困难的方法是通过编辑

RuleEditor.js

，在每次更改时重新呈现数组状态（无效）：

else if（element.Type==TEXT）{
const inputName=element.Name.toLowerCase（）.replace（“，”）；
/*
**否->不希望为每个渲染设置状态->无限循环风险
*/
//this.setState（{[inputName]：element.Value}）
元素。推(
{element.Name}


{
这是指输入值的变化（e）；
}} />
);

onInputValueChange（e）{
const name=e.target.name；
这是我的国家(
{
[名称]：e.target.value
},
() => {
//重新设置收割台和干管的状态
这是我的国家({
header:this.buildRowsUsing_antD（this.ruleProperties.Parts.header.Rows），
main:this.buildRowsUsing_antD（this.ruleProperties.Parts.main.Rows）
});
}
);
}

为此，将不使用defaultValue。如果要设置默认值，则必须在呈现状态之前或之后（不是在呈现状态时）将

this.state[inputName]

指定给默认值。虽然不是很好但很简单的方法是执行

value={this.state[inputName]| | element.value}

输入值更改（e，索引，i）{
    onInputValueChange(e, index, i) {
      const name = e.target.name;
      let header = this.ruleProperties.Parts.Header.Rows
      header[i].Elements[index].Value = e.target.value
      console.log(header[i], header[i].Elements[index], "valuessssssss");
      this.setState(
        {
          header: this.buildRowsUsing_antD(header),
        },
        () => {
          console.log(header, "dfsaf");
        }
      );
    }

    buildRowsUsing_antD(rows) {
      let localRows = [];
      let elements = [];
      console.log("ressosss", rows);
      rows.map((row, i) => {
        elements = [];
        row.Elements.map((element, index) => {
          // console.log(element.Type);
          if (element.Type === LIST) {
            elements.push(
              <td className="view-cell" align="left">
                {element.Name}
                <br />
                <TreeSelect
                  // className=""
                  style={{ width: "100%" }}
                  // value={element.Value}
                  defaultValue={element.Value}
                  dropdownStyle={{
                    maxHeight: 400,
                    overflow: "auto",
                    zIndex: "10000",
                    position: "absolute"
                  }}
                  treeData={this.buildTreeData_antD(element.Values)}
                  // placeholder={element.Name}
                  // treeDefaultExpandAll
                  // onChange={this.onInputChange(element.Id, element.Name)}
                  onChange={val =>
                    this.onInputChange(element.Id, element.Name, val)
                  }
                />
              </td>
            );
          } else if (element.Type === "Text") {
            //   console.log(".......", element.Value);
            // -----------------------------------------------------------------------------------
            let inputName = element.Name.toLowerCase().replace(" ", "");
            // this.setState({ [inputName]: element.Value });
            //   this.setState({ [inputName]: element.Value }, () =>
            elements.push(
              <td className="view-cell" align="left">
                {element.Name}
                <br />
                <Input
                  key={element.Id}
                  name={inputName}
                  style={{ width: "100%" }}
                  // className="rounded"
                  // label={element.Name}
                  // defaultValue={element.Value}
                  value={element.Value}//do changes hereeeeeeeeee
                  disabled={!element.Editable}
                  // size={element.Width}
                  onChange={e => {
                    this.onInputValueChange(e, index, i);//pass indexxxxxxxx
                    // this.onInputChange(element.Id, element.Name, e.target.value)
                  }}
                />
              </td>
            );
            //   );
          } else if (element.Type === TEXTAREA) {
            const inputName = element.Name.toLowerCase().replace(" ", "");
            this.setState({ [inputName]: element.Value });
            //   this.setState({ [inputName]: element.Value }, () =>
            elements.push(
              <td className="view-cell-full" width="100%">
                {element.Name}
                <br />
                <TextArea
                  key={element.Id}
                  name={inputName}
                  // className="rounded"
                  componentclass="textarea"
                  rows={5}
                  style={{ width: "100%", resize: "auto" }}
                  // placeholder=""
                  disabled={!element.Editable}
                  defaultValue={element.Value}
                  value={this.state[inputName]}
                  onChange={e => {
                    this.onInputValueChange(e); // this.setState({inputVal: e.target.value})
                    // this.onInputChange(element.Id, element.Name, e.target.value)
                    //TODO - Assuming that text area is only for constraint field
                    //   this.props.ruleChangeCallBack(null, e.target.value);
                  }}
                />
              </td>
            );
            //   );
          } else if (element.Type === BUTTON) {
            elements.push(
              <Button
                key={element.Id}
                // onClick={this.onInputChange(element.Id, element.Name, null)}
                onClick={() => this.onInputChange(element.Id)}
              >
                {element.Value}
              </Button>
            );
          } else if (element.Type === LABEL) {
            elements.push(
              <td className="view-cell-full" align="left">
                {element.Value}
              </td>
            );
          }
        });
        // localRows.push(<div className="view-row">{elements}</div>)
        localRows.push(<tr className="view-row">{elements}</tr>);
      });

      return (
        <table width="100%" className="view-table">
          <tbody>{localRows}</tbody>
        </table>
      );
    }

const name=e.target.name；
让header=this.ruleProperties.Parts.header.Rows
标题[i]。元素[index]。值=e.target.Value
log（头[i]，头[i]。元素[index]，“valuessss”）；
这是我的国家(
{
header:this.buildRowsUsing_antD（header），
},
() => {
日志（标题“dfsaf”）；
}
);
}
建筑物用地（行）{
设localRows=[]；
让元素=[]；
console.log（“resosss”，行）；
rows.map（（row，i）=>{
元素=[]；
row.Elements.map（（元素，索引）=>{
//console.log（element.Type）；
if（element.Type==列表）{
元素。推(
{element.Name}


this.onInputChange（element.Id、element.Name、val）
}
/>
);
}else if（element.Type==“Text”）{
//console.log（“…”，element.Value）；
// -----------------------------------------------------------------------------------
让inputName=element.Name.toLowerCase（）.replace（“，”）；
//this.setState（{[inputName]：element.Value}）；
//this.setState（{[inputName]：element.Value}，（）=>
元素。推(
{element.Name}


{
this.onInputValueChange（e，index，i）；//传递indexxxxxxxx
//this.onInputChange（element.Id、element.Name、e.target.value）
}}
/>
);
//   );
}else if（element.Type==TEXTAREA）{
const inputName=element.Name.toLowerCase（）.replace（“，”）；
this.setState（{[inputName]：element.Value}）；
//this.setState（{[inputName]：element.Value}，（）=>
元素。推(
{element.Name}


{
this.onInputValueChange（e）；//this.setState（{inputVal:e.target.value}）
//this.onInputChange（element.Id、element.Name、e.target.value）
//TODO-假设文本