如何正確禁用ReactJS上的按鈕？

我正在學習ReactJS。我編寫了一個Web應用程序，該應用程序應該顯示一個輸入文本和一個按鈕「確認」，當按下它時，會顯示一個帶有「返回」按鈕的第二個輸入文本，以刪除新輸入。當第二個顯示時，第一個輸入和第一個按鈕被禁用。如何正確禁用ReactJS上的按鈕？

但是，我現在的劇本是不能接受的。我在將函數傳遞給函數FormRender的時候遇到了問題，並且在FormRender對象本身中指出了屬性「disabled」（它聲稱已經找到了「unexpected token」）。

有沒有更好的方法？

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

來源

2017-03-05 Roc

你可以用'禁用= {真/假}'，不需要串轉換。 [實施例]（http://stackoverflow.com/a/41488965/6941627）。 –

@Roc你的代碼中有一些錯誤。 1.功能部件還沒有得到這樣的狀態： '{this.state.value}'將無法工作 2.在FormRender你得到的第一個參數獲得的道具，所以不要使用'this.props.disable '但是'props.disable' 3.當你指定像'onClick'這樣的事件處理程序時，你應該指定一個函數：'onClick = {this.props.Click}'（不包括括號） 4.當你定義道具時，：'作爲分配操作員。在大多數地方使用'='，但在少數地方使用'：'。你必須改變它。，也許你應該使用'點擊= {this.In.bind（這）}' – Grajek

我忘記你的「意外的標記」錯誤。在FormRender中使用'disbale = {this.props.disable}'。 – Grajek

我不知道這是否是你想要什麼我的例子

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/

你已經在你的代碼有許多語法錯誤。我建議使用棉短絨:)

來源

2017-03-06 17:50:40 Grajek

相信與否，仍然是同一種錯誤。這是瀏覽器問題嗎？我正在用Firefox 51.0.1測試它。我想知道什麼樣的函數是「地圖」，爲什麼你在函數In中通過，作爲一個新的函數對象而不是「更新」來禁用錯誤似乎是在{props.holder} – Roc

如何正確禁用ReactJS上的按鈕？

回答

相關問題