Rendern eines dynamischen Eingabefeldes in React

Question

Ich habe hier ein Quizformular und möchte Eingabefelder für Fragen hinzufügen, wenn ein Benutzer auf die Schaltfläche "Frage hinzufügen" klickt.

Ich habe mit dem Code herum gespielt und war in der Lage, das Zustandsobjekt mit etwas Text zu füllen. Offensichtlich ist das Ziel, dies eine Eingabekomponente zu haben und diese dann irgendwie auf den Bildschirm zu übertragen.

Womit ich kämpfe ist, wie man ein tatsächliches Element auf der Seite rendert. Ich weiß, es ist in der Render-Methode der Komponente getan, nur nicht genau, wie.

Ich glaube, ich komme näher. Jede Hilfe wäre willkommen. Der Code ist unten.

Danke!

var QuizForm = React.createClass({ 
     getInitialState : function() { 
      return { questions : [] } 
     }, 
     createQuestion : function() { 

     this.state.questions.push("Test"); 

     // Adds "Test" to state object. 
     this.setState({ 
      questions : this.state.questions 
     }); 
    }, 
    render : function() { 
     return (
      <div className="quiz-form well text-center"> 
       <h1 className="header text-center">Quiz Form</h1> 
       <ul> 
        {/* Would like question inputs to show up here */} 
       </ul> 
       <button onClick={this.createQuestion} className="add-question-btn btn btn-primary" style={{ marginTop : 40 }}>Add Question</button> 
      </div>  
     ); 
    } 

Answer 1

Karte einfach Ihre this.state.questions Array an das HTML-Element Sie wollen.

Zum Beispiel, wenn Sie <li> Elemente rendern wollen:

render : function() { 
    return (
     <div className="quiz-form well text-center"> 
      <h1 className="header text-center">Quiz Form</h1> 
      <ul> // magic happens now 
       {this.state.questions.map(function(state) { 
        return <li>{state}</li> 
       })} 
      </ul> 
      <button onClick={this.createQuestion} 
       className="add-question-btn btn btn-primary" 
       style={{ marginTop : 40 }}>Add Question</button> 
     </div>  
    ); 
} 

Siehe an example.

---

Wenn Sie <input> Tags machen möchten, können Sie die gleiche Technik, die oben verwenden, aber von the fact that React treats it as a controlled component achtsam sein.

Answer 2

A Reagieren beste Praxis wäre Ihre state.questions Array zu einer dynamisch erzeugten HTML-Komponente abbilden wie:

render : function() { 
    return (
     <div className="quiz-form well text-center"> 
      <h1 className="header text-center">Quiz Form</h1> 
      <ul> // magic happens now 
       {this.state.questions.map(function(state) { 
        return <li key={state.someId}>{state.question}</li> 
       })} 
      </ul> 
      <button onClick={this.createQuestion} 
       className="add-question-btn btn btn-primary" 
       style={{ marginTop : 40 }}>Add Question</button> 
     </div>  
    ); 
} 

Beachten Sie bitte, dass beim Mapping und Rendering-dynamische Objekte in React es immer gut ist zu Fügen Sie einen Schlüssel für jedes gemappte Objekt ein. Stellen Sie sicher, dass Sie das beim Erstellen des Inhalts erstellen.

Mit freundlichen Grüßen,