Javascript 如何在react中获取输入字段值？

我正在动态添加

输入字段

。我想获取它的值。您能告诉我如何获取它的值吗

这是我的密码

返回(
{state.inputs.map（输入=>(
))}
添加
);

我想得到它的价值如何

---

任何更新

我都会为每个输入输入一个

名称

，并传递一个onChange函数。然后在onChange函数中，我将根据名称设置状态

作用

onChange = e => {
  this.setState({[e.target.name] : e.target.value});
}

渲染

render(){
return (
    <div className="App">
      <Form>
        {state.inputs.map(input => (
          <KeyValue name={input.name} value={this.state[input.name]} onChange={this.onChange } />
        ))}
        <Button type="button" primary onClick={appendInput}>
          Add
        </Button>
      </Form>
    </div>
  );

}

render（）{
返回(
{state.inputs.map（输入=>(
))}
添加
);
}

这是我的解决方案

将函数传递给KeyValue组件，以便在输入更改时获取值

  const handleChangeKeyValues = name => value => {
    setState(prevState => {
      const newValues = {
        ...prevState.values,
        [name]: value
      };

      return {
        ...prevState,
        values: newValues
      };
    });
  };

并从道具接收值，并处理KeyValue组件中的输入

const KeyValue = ({ onChange, values = { firstName: "", lastName: "" } }) => {
  const handleChangeInput = event => {
    const { value, name } = event.target;

    const newFormValue = { ...values, [name]: value };

    onChange(newFormValue);
  };

  return (
    <Form.Group widths="equal">
      <Form.Input
        value={values.firstName}
        fluid
        label="Key"
        name="firstName"
        placeholder="First name"
        onChange={handleChangeInput}
      />
      <Form.Input
        value={values.lastName}
        fluid
        label="Value"
        name="lastName"
        placeholder="Last name"
        onChange={handleChangeInput}
      />
      <Icon style={{ top: 30, position: "relative", left: 10 }} name="delete" />
      <Form.Input
        style={{ display: "none" }}
        fluid
        label=""
        placeholder="Last name"
      />
    </Form.Group>
  );
};

constkeyvalue=（{onChange，values={firstName:，lastName:}}）=>{
const handleChangeInput=事件=>{
const{value，name}=event.target；
const newFormValue={…values，[名称]：value}；
onChange（newFormValue）；
};
返回(
);
};

---

为每个输入以唯一名称存储状态中的值

，但它是动态生成的

const KeyValue = ({ onChange, values = { firstName: "", lastName: "" } }) => {
  const handleChangeInput = event => {
    const { value, name } = event.target;

    const newFormValue = { ...values, [name]: value };

    onChange(newFormValue);
  };

  return (
    <Form.Group widths="equal">
      <Form.Input
        value={values.firstName}
        fluid
        label="Key"
        name="firstName"
        placeholder="First name"
        onChange={handleChangeInput}
      />
      <Form.Input
        value={values.lastName}
        fluid
        label="Value"
        name="lastName"
        placeholder="Last name"
        onChange={handleChangeInput}
      />
      <Icon style={{ top: 30, position: "relative", left: 10 }} name="delete" />
      <Form.Input
        style={{ display: "none" }}
        fluid
        label=""
        placeholder="Last name"
      />
    </Form.Group>
  );
};