が反応：動的に私はフォームのformsy-反応を使用しています

Question

を形成するために、入力フィールドを追加し、私はイベントが発生したときに、より多くのオプションをレンダリングしたい、コードは次のようなものになります。

class MultipleChoice extends Component { 
constructor(props) { 
    super(props); 

} 

render() { 

    return(
     <div> 
      <Form> 
       <div id="dynamicInput"> 
        <FormInput /> 
       </div> 
      </Form> 
     </div> 
    ); 

} 
} 

を私がボタンを持っていますonClickイベントdiv id "dynamicInput"に別のIDを追加する関数を起動したいのですが可能ですか？

Answer 1

はい、コンポーネントの基礎データ（stateまたはprops）を更新できます。 Reactが非常に優れている理由の1つは、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({ inputs: this.state.inputs.concat([newInput]) }); 
    } 
} 

例はそれほど有用ではありませんが、必要なものを達成する方法を示してくれることを願っています。以下は

Answer 2

は私がformsy反応し使用していませんでしたが、私はそれがformsyせずに同じことをやろうとしている人を助けた場合にここに投稿し、同じ問題を解決し、この

var OnlineEstimate = React.createClass({ 
    getInitialState: function() { 
     return {inputs:[0,1]}; 
    }, 
    handleSubmit: function(e) { 
     e.preventDefault(); 
     console.log(this.refs); 
     return false; 

    }, 
    appendInput: function(e) { 
     e.preventDefault(); 
     var newInput = this.state.inputs.length; 

     this.setState({ inputs: this.state.inputs.concat(newInput)},function(){ 
      return; 
     }); 

     $('.online-est').next('.room-form').remove() 

    }, 
    render: function() { 
     var style = { 
      color: 'green' 
     }; 
     return(
       <div className="room-main"> 
        <div className="online-est"> 
         <h2 className="room-head">Room Details 
          <button onClick={this.handleSubmit} className="rednew-btn"><i className="fa fa-plus-circle"></i> Save All</button>&nbsp; 
          <a href="javascript:void(0);" onClick={this.appendInput} className="rednew-btn"><i className="fa fa-plus-circle"></i> Add Room</a> 
         </h2> 

         {this.state.inputs.map(function(item){ 
          return (
            <div className="room-form" key={item} id={item}> 
             {item} 
             <a href="" className="remove"><i className="fa fa-remove"></i></a> 
             <ul> 
              <li> 
               <label>Name <span className="red">*</span></label> 
               <input type="text" ref={'name'+item} defaultValue={item} /> 
              </li> 

             </ul> 
            </div> 
          ) 

         })} 
        </div> 
       </div> 

     ); 
    } 
    }); 

Answer 3

のための完全なソリューションです。

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> 
    ) 
    } 
}