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

admin管理员组

文章数量:1316659

I'm pretty new to reactjs, i came across a scenario where i've to create 6 input fields which are very much similar to each other. Right now i've something like this in my render method of class,

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

The code is ugly and redundant, is there anyway i could do this dynamically?

I'm pretty new to reactjs, i came across a scenario where i've to create 6 input fields which are very much similar to each other. Right now i've something like this in my render method of class,

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

The code is ugly and redundant, is there anyway i could do this dynamically?

• javascript
• reactjs

Share Improve this question Follow asked Mar 26, 2016 at 13:35 user3588408user3588408 30166 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

How about defining an Answer ponent 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 ponent 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 ponents
        </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>                    
  );
}

本文标签： javascriptHow can i create input text fields dynamically in react jsJSXStack Overflow