如何将我的输入值复制到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 />

Answer 1

您在代码中犯了一个关键错误。您在字段2中分配了this.state.field1，所以它不起作用。

您只需要将其更改为此：

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

Answer 2

您只需要在handleChange中设置field1状态：

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

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