Question

我通过点击＆＃34创建动态输入字段;添加＆＃34;按钮。所有新输入都将保存在一个对象数组中。这些只是代码片段。有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元素仅传递索引，而不是事件。试试这个：

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

反应动态输入的未定义的event.target.value

1 个答案: