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

新手上路,请多包涵

我正在为表单使用 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 许可协议

阅读 375
2 个回答

是的,我们可以更新组件的基础数据(即 stateprops )。 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 许可协议

我没有使用 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题