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

生来就可爱ヽ(ⅴ<●) 提交于 2019-12-05 15:51:40

How about defining an Answer component like this (only showing the render method):

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

And then on your parent component you just import it and use it like:

var Answer = require('./answer.js');
//..

render() {
    return (
        <div>
          <Answer name="answer1" value={this.state.answer1} handleChange={this._handleChange} />
          <Answer name="answer2" value={this.state.answer2} handleChange={this._handleChange} />
          <Answer name="answer3" value={this.state.answer3} handleChange={this._handleChange} />
          // add all your Answer components
        </div>                    
    );
}

Following Thylossus suggestion, here is an example using 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>                    
  );
}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!