ReactJSのボタンを正しく無効にするには？

Question

私はReactJSを学んでいます。入力テキストと「確認」ボタンを表示するWebアプリケーションを作成し、押されると、新しい入力を削除する「戻る」ボタンが付いた2番目の入力テキストが表示されます。 2番目が表示されているときは、最初の入力と最初のボタンが無効になります。

ただし、私の現在のスクリプトは受け入れられません。私は関数をFormRender関数に渡し、FormRenderオブジェクト自体に "disabled"（ "予期しないトークン"を発見したと主張する）というプロパティを渡すことに問題があります。

もっと良いアプローチはありますか？

function FormRender (props) { 
    return (
     <div> 
      <input type = "text" placeholder = {this.props.holder} {this.props.disable} /> 
      <button onClick = {this.props.Click()} {this.props.disable} > {this.state.value} </button> 
     </div> 
    ); 
}; 

var R = React.createClass ({ 
    getInitialState: function() { 
     return { names: [], disable: false } 
    }, 
    update: function() { 
     return this.state.disable ? "disabled" : ""; 
    }, 
    componentDidMount: function() { 
     var a = this.state.names; 
     a.push (<FormRender holder = 'Name' value = 'Confirm' Click = {this.In}, disable: {this.update} />); 
     this.setState ({ names: a }); 
     this.forceUpdate(); 
    }, 
    In: function() { 
     var a = this.state.names; 
     this.setState ({ disable: true }); 
     a.push (<FormRender holder = 'Surname ' value = 'Back' Click = {this.Out} disable: "" />); 
     this.setState ({ names: a }); 
     this.forceUpdate(); 
    }, 
    Out: function() { 
     var a = this.state.names; 
     this.setState ({ disable: false }); 
     a.splice(a.length-1,1); 
     this.setState ({ names: a }); 
     this.forceUpdate(); 
    }, 
    render: function() { 
     return (
      <div> 
       {this.state.names} 
      </div> 
     ); 
    } 
}); 

Answer 1

私はそれが

function FormRender (props) { 
return (
    <div> 
     <input 
      type="text" 
      placeholder={props.holder} 
      disabled={props.disable()} 
     /> 
     <button 
      onClick={props.click} 
      disabled={props.disable()} 
     > 
      {props.value} 
     </button> 
    </div> 
); 
}; 

var R = React.createClass ({ 
getInitialState: function() { 
    return {names: [], disable: false} 
}, 

update: function() { 
    return this.state.disable; 
}, 

componentDidMount: function() { 
    var a = this.state.names; 
    var form = { 
     holder: 'Name', 
     value: 'Confirm', 
     click: this.In, 
     disable: this.update 
    }; 

    a.push(form); 
    this.setState({names: a}); 
}, 
In: function() { 
    if (this.state.names.length > 1) { 
     return; 
    } 

    var a = this.state.names; 
    var form = { 
     holder: 'Surname', 
     value: 'Back', 
     click: this.Out, 
     disable: function() { 
      return false 
     } 
    } 

    this.setState({disable: true}); 
    a.push(form); 
    this.setState({names: a}); 
}, 
Out: function() { 
    var a = this.state.names; 
    this.setState({disable: false}); 
    a.splice(a.length-1,1); 
    this.setState({names: a}); 
}, 
render: function() { 
    return (
     <div> 
      {this.state.names.map(function (el) { 
       return (<FormRender 
        holder={el.holder} 
        value={el.value} 
        click={el.click} 
        disable={el.disable} 
       />); 
      })} 
     </div> 
    ); 
} 
}); 

https://jsfiddle.net/69z2wepo/72509/

何をしたい私の例である場合は、あなたのコードでは、多くの構文エラーを持っていることを確認していません。 私はlinterを使うことをお勧めします:)