Question

我正在动态添加input fields。我想获得它的价值。能否请你告诉我我将如何获得它的价值

这是我的代码 https://codesandbox.io/s/adoring-meninsky-hu3f8

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

我想知道它的价值如何？

任何更新

Answer 1

我将为每个输入放置一个name并将其传递给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>
  );

}

Answer 2

这是我的解决方法https://codesandbox.io/s/pensive-lake-erynd

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

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

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

并从prop接收值并处理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>
  );
};

将状态值存储在每个输入的唯一名称下

如何获得反应中的输入字段值？

2 个答案: