javascript - 如何将我的输入值复制到 React 中的下一个输入？

Question

我有两个输入框，当我在一个输入框中输入时，它的副本应该在下一个输入框中。

为此，我正在使用来自 field1 的值设置 field2 的状态

我尝试了以下但我得到未定义（如果我记录下一个值，在控制台中）。

请指导我解决这个问题。

代码如下：

在班上：

constructor(props) {
    super(props);
    this.state = {
     field1: "",
     field2: "",
    };
}

handleChange = (event) => {
    let field1= event.target.value;
    // console.log("coming1", field1); // given input is showing here
    this.setState({ field2: field1 });
    // let x=this.setState({ field2: field1 });
    // console.log("Output",x); //undefined 
};

以下是表单中呈现的输入字段：

 field1: <Field type="text"
                component={TextField}
                placeholder="enter in field1"
                name="field1"
                required
                onChange={this.handleChange} />

 field2:  <Field type="text"
                 component={TextField}
                 placeholder="value comes from field1"
                 name="field2"
                 value={this.state.field2}
                 required />

Edit1：这不仅仅是精确的直接复制品。我将从 field1 中切出一些值并将其复制到 field2

标签： javascriptreactjs

Answer 1

您应该将这两个值绑定到状态。因为 UI 的变化需要反映在状态中。

handleChange = (event) => {
    let field1Value= event.target.value;
    this.setState({ field1: field1Value, field2: field1Value });
};

对于渲染

 <Field type="text"
      component={TextField}
      placeholder="enter in field1"
      value={this.state.field1}
      name="field1"
      required
      onChange={this.handleChange} />

 <Field type="text"
     component={TextField}
     placeholder="value comes from field1"
     name="field2"
     value={this.state.field2}
     required />

如果您只想查看数据的副本，请将 field2 的值更改为，{this.state.field1}以便您可以排除 state 中的附加 field2 属性。