如何在react js-JSX中动态创建输入文本字段

How can i create input text fields dynamically in react js - JSX?

本文关键字：创建输入文本字段动态 react js-JSX 更新时间：2023-09-26

我对reactjs很陌生，我遇到了一个场景，我必须创建6个彼此非常相似的输入字段。现在我在类的呈现方法中有这样的东西

render () {
    return (
        <div>
            <p>
                <label htmlFor="answerswer1">Answer:</label><br/>
                <input
                type="text"
                name="answerswer1"
                id="answerswer1"
                className="answerswer"
                value={this.state.answer1}
                onChange={this._handleChange}
                />
            </p>
            <p>
                <input
                type="text"
                name="answerswer2"
                id="answerswer2"
                className="answerswer"
                value={this.state.answer2}
                onChange={this._handleChange}
                />
            </p>
            <p>
                <input
                type="text"
                name="answerswer3"
                id="answerswer3"
                className="answerswer"
                value={this.state.answer3}
                onChange={this._handleChange}
                />
            </p>
            <p>
                <input
                type="text"
                name="answerswer4"
                id="answerswer4"
                className="answerswer"
                value={this.state.answer4}
                onChange={this._handleChange}
                />
            </p>
            <p>
                <input
                type="text"
                name="answerswer5"
                id="answerswer5"
                className="answerswer"
                value={this.state.answer5}
                onChange={this._handleChange}
                />
            </p>
            <p>
                <input
                type="text"
                name="answerswer6"
                id="answerswer6"
                className="answerswer"
                value={this.state.answer6}
                onChange={this._handleChange}
                />
            </p>
        </div>
    );
}

代码是丑陋和多余的，有没有我可以动态地做到这一点？

如何定义这样的Answer组件（仅显示渲染方法）：

render() {
  return (
    <p>
        <label htmlFor={this.props.name}>Answer:</label>
        <input
          type="text"
          name={this.props.name}
          className="answerswer"
          value={this.props.value}
          onChange={this.props.handleChange}
        />
    </p>  
  );
}

然后在你的父组件上，你只需导入它并像一样使用它

var Answer = require('./answer.js');
//..
render() {
    return (
        <div>
          <Answer name="answerswer1" value={this.state.answer1} handleChange={this._handleChange} />
          <Answer name="answerswer2" value={this.state.answer2} handleChange={this._handleChange} />
          <Answer name="answerswer3" value={this.state.answer3} handleChange={this._handleChange} />
          // add all your Answer components
        </div>                    
    );
}

根据Thylossus的建议，这里有一个使用map:的例子

var Answer = require('./answer.js');
//...
render() {
  // this is supposing you've got an answers array of { name: ..., value: ...} object
  var answers = this.state.answers.map(function(a) {
    return(<Answer name={a.name} value={a.value} handleChange={this._handleChange} />)
  });
  return (
    <div>
      { answers }
    </div>                    
  );
}