React.JSで制御されたコンポーネントを使用して動的フォームを実装する方法は？私は<code>controlled form components</code><a href="https://facebook.github.io/react/docs/forms.html#controlled-components" rel="noreferrer">in react.js official website</a>のための参照の例を見ていたよう

Question

、私は1つがあなたは彼らが部品を制御されるように動的にremoveとaddinput要素にできるようになるするformを実施することになっているか疑問に思って？これも可能ですか？私たちが見ることができるの例で

：

class NameForm extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {value: ''}; 

    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
    this.setState({value: event.target.value}); 
    } 

    handleSubmit(event) { 
    alert('A name was submitted: ' + this.state.value); 
    event.preventDefault(); 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <label> 
      Name: 
      <input type="text" value={this.state.value} onChange={this.handleChange} /> 
     </label> 
     <input type="submit" value="Submit" /> 
     </form> 
    ); 
    } 
} 

により私の仕事の性質のために、私はしばしば自分自身がそのようなフォームを実装する必要が見つけます。さらに、私はaddまたはremoveinputの要素を直接的には管理していませんが、ここでは単純化のために基本的なフォーム要素を求めています。

Answer 1

動的に入力要素を追加/削除する方法はありますか？

はい、それはあなたが追加/ input要素dynamicallyを削除し、しかし、そのためにあなたは、いくつかの世話をする必要があることができ、可能です：イベントの

の1-適切な結合。

各入力要素の値を別々に格納する配列。

3-入力要素の値をユーザーが入力し、その状態の特定の値のみを更新するとき。

ロジック：

、値を格納する状態内部アレイを維持します。 #array.mapを使用して、各配列値にui（入力要素）を作成します。フィールドを作成する際には、各フィールドにremove buttonを使用し、そのフィールドのインデックスをfunctionに渡すと、削除するフィールドを特定するのに役立ちます。onChangeの場合も同様です。

チェックこの例：

class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { values: [] }; 
 
    this.handleSubmit = this.handleSubmit.bind(this); 
 
    } 
 

 
    createUI(){ 
 
    return this.state.values.map((el, i) => 
 
     <div key={i}> 
 
    \t  <input type="text" value={el||''} onChange={this.handleChange.bind(this, i)} /> 
 
    \t  <input type='button' value='remove' onClick={this.removeClick.bind(this, i)}/> 
 
     </div>   
 
    ) 
 
    } 
 

 
    handleChange(i, event) { 
 
    let values = [...this.state.values]; 
 
    values[i] = event.target.value; 
 
    this.setState({ values }); 
 
    } 
 
    
 
    addClick(){ 
 
    this.setState(prevState => ({ values: [...prevState.values, '']})) 
 
    } 
 
    
 
    removeClick(i){ 
 
    let values = [...this.state.values]; 
 
    values.splice(i,1); 
 
    this.setState({ values }); 
 
    } 
 

 
    handleSubmit(event) { 
 
    alert('A name was submitted: ' + this.state.values.join(', ')); 
 
    event.preventDefault(); 
 
    } 
 

 
    render() { 
 
    return (
 
     <form onSubmit={this.handleSubmit}> 
 
      {this.createUI()}   
 
      <input type='button' value='add more' onClick={this.addClick.bind(this)}/> 
 
      <input type="submit" value="Submit" /> 
 
     </form> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='container'/>

チェックjsfiddle作業：https://jsfiddle.net/mayankshukla5031/ezdxg224/

Answer 2

あなたは簡単にあなたの状態やあなたが何を決定するために他の成分から渡している小道具を使用することができますあなたのフォームはすべきです。

ここでダム例：

class NameForm extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {value: ''}; 

    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
    this.setState({value: event.target.value}); 
    } 

    handleSubmit(event) { 
    alert('A name was submitted: ' + this.state.value); 
    event.preventDefault(); 
    } 

    render() { 
    let myForm; 
    if(this.props.someprop == true){ 
     myForm = (
      <form onSubmit={this.handleSubmit}> 
       <label> 
       Name: 
       <input type="text" value={this.state.value} onChange=  {this.handleChange} /> 
       </label> 
       <input type="submit" value="Submit" /> 
      </form> 
     ); 
    } 
    else if(this.state.statevar == "expectedValue"){ 
     myForm = (
      // other HTML with embedded JS here 
     ); 
    } 


    return (
     {myForm} 
    ); 
    } 
} 

私はちょうど明確にすることがrenderメソッドでそれをやったが、すべてのロジックは、補助機能に移動させることができます。