阵营：动态添加输入字段形成

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