React: динамически добавлять поля ввода для формирования

Question

Я использую formsy реагируют на форму, я хочу сделать больше вариантов, когда событие срабатывает, код выглядит примерно так:

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

} 

render() { 

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

} 
} 

У меня есть кнопка и событие onClick Я хочу запустить функцию, которая добавляет другую в div id "dynamicInput", возможно ли это?

Answer 1

Да, мы можем обновить базовые данные нашего компонента (т.е. state или props). Одна из причин, по которой React настолько велика, заключается в том, что она позволяет нам сосредоточиться на наших данных вместо 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

Ниже приводится полное решение для этого

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

Я не использовал formsy реагировать, но я решил такую ​​же проблему, размещая здесь в случае, если это помогает кто-то пытается сделать то же самое без formsy.

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