反应动态输入的 event.target.value of undefined

Question

我正在通过单击 "add" 按钮创建动态输入字段。所有新输入都将保存在一个对象数组中。这些只是代码片段。还有 original repo.

这是Section.js

       constructor() {
            super();
            this.state = {
              name: '',
              subsection: [
                  {
                    subname: ''
                  }
                ]
            };
          }
        handleOnChange(e, idx) {
            const subsection = this.state.subsection;
            subsection[idx].subname = e.target.value;
            this.forceUpdate();
          }

  addNewSubsection() {
    this.setState({
        subsection: this.state.subsection.concat([{ subname: '' }])
    });
  }`

这是 Subsection.js 其中包括输入：

    renderSubsection() {
    const { subsection, handleOnChange } = this.props;
    return subsection.map((sub, idx) => {
      return (
        <Row key={idx}>
          <h5>Name:</h5>
          <Input
            s={12}
            onChange={() => handleOnChange(idx)}
            value={sub.subname}
          />
          <h5>Video album <Icon>clear</Icon></h5>
          <a href='#' s={12}><Icon large>attach_file</Icon></a>
          <Input s={12}type='radio' value='add_to_trial' label="included in trial" />
        </Row>
      );
    });
  }

Answer 1

Subsection 组件中的输入元素只传递索引，不传递事件。试试这个：

      <Input
        s={12}
        onChange={event => handleOnChange(event, idx)}
        value={sub.subname}
      />

反应动态输入的 event.target.value of undefined

React dynamic input's event.target.value of undefined

onchange

dom-events

reactjs