React：动态添加输入字段到表单

Question

我正在为表单使用 formsy-react，我想在触发事件时呈现更多选项，代码如下所示：

 class MultipleChoice extends Component {
constructor(props) {
    super(props);

}

render() {

    return(
        <div>
           <Form>
               <div id="dynamicInput">
                   <FormInput />
               </div>
           </Form>
        </div>
    );

}
}

我有一个按钮和 onClick 事件，我想触发一个将另一个附加到 div id“dynamicInput”的函数，这可能吗？

原文由 jayasth 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，我们可以更新组件的基础数据（即 state 或 props ）。 React 如此出色的原因之一是它允许我们专注于我们的数据而不是 DOM。

假设我们有一个要显示的输入列表（作为字符串数组存储在 state 中），当单击按钮时，我们向该列表添加一个新的输入项：

 class MultipleChoice extends Component {
    constructor(props) {
        super(props);
        this.state = { inputs: ['input-0'] };
    }

    render() {
        return(
            <div>
               <Form>
                   <div id="dynamicInput">
                       {this.state.inputs.map(input => <FormInput key={input} />)}
                   </div>
               </Form>
               <button onClick={ () => this.appendInput() }>
                   CLICK ME TO ADD AN INPUT
               </button>
            </div>
        );
    }

    appendInput() {
        var newInput = `input-${this.state.inputs.length}`;
        this.setState(prevState => ({ inputs: prevState.inputs.concat([newInput]) }));
    }
}

显然这个例子不是很有用，但希望它能告诉你如何完成你需要的。

原文由 Calvin Belden 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我没有使用 formy-react 但我解决了同样的问题，在这里发帖以防有人在没有 formsy 的情况下尝试做同样的事情。

 class ListOfQuestions extends Component {
  state = {
    questions: ['hello']
  }

  handleText = i => e => {
    let questions = [...this.state.questions]
    questions[i] = e.target.value
    this.setState({
      questions
    })
  }

  handleDelete = i => e => {
    e.preventDefault()
    let questions = [
      ...this.state.questions.slice(0, i),
      ...this.state.questions.slice(i + 1)
    ]
    this.setState({
      questions
    })
  }

  addQuestion = e => {
    e.preventDefault()
    let questions = this.state.questions.concat([''])
    this.setState({
      questions
    })
  }

  render() {
    return (
      <Fragment>
        {this.state.questions.map((question, index) => (
          <span key={index}>
            <input
              type="text"
              onChange={this.handleText(index)}
              value={question}
            />
            <button onClick={this.handleDelete(index)}>X</button>
          </span>
        ))}
        <button onClick={this.addQuestion}>Add New Question</button>
      </Fragment>
    )
  }
}

原文由 Josh Pittman 发布，翻译遵循 CC BY-SA 3.0 许可协议