React setState可重用

所以我試圖創建一個函數，可以用來設置狀態在事件傳入的不同鍵值。當我登錄狀態時，它仍處於初始狀態，每個鍵上都有空字符串。我在setState中的鍵值上嘗試使用和不使用[]。謝謝React setState可重用

constructor(props){ 
    super(props) 
    this.state={ 
     Day:'', 
     Open:'', 
     Close:'' 
    } 
    } 

    logState(){ 
    console.log(this.state); 
    } 
    pushTime(event){ 
    event.preventDefault(); 
    console.log('Clicked ', event.target.id, event.target.value); 
    var id = event.target.id 
    console.log(typeof id); 
    this.setState({[event.target.id]:event.target.name}) 
    }

來源

2017-01-27 GoyaKing

您需要綁定pushTime功能，所以它可以訪問的狀態。爲此，您可以使用arrow function或bind it in constructor。此外setState需要時間發生變異的狀態，所以你必須調用logState功能setState回調裏面像下面的例子

class App extends React.Component { 
 
    constructor(props){ 
 
    super(props) 
 
    this.state={ 
 
     Day:'', 
 
     Open:'', 
 
     Close:'' 
 
    } 
 
    } 
 

 
    logState(){ 
 
    console.log(this.state); 
 
    } 
 
    pushTime = (event) =>{ 
 
    event.preventDefault(); 
 
    console.log('Clicked ', event.target.id, event.target.value); 
 
    var id = event.target.id 
 
    this.setState({[id]:event.target.name}, function() { 
 
     this.logState(); 
 
    }) 
 
    } 
 
    render() { 
 
    return (
 
     <div> 
 
     <input type='checkbox' id='Day' name='Day' onClick={this.pushTime} value='Day'/> 
 
     <input type='checkbox' id='Open' name='Open' value='Open' onClick={this.pushTime}/> 
 
     <input type='checkbox' id='Close' name='Close' value='Close' onClick={this.pushTime}/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

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

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

來源

2017-01-27 05:43:38

pushTime(event){ 
    event.preventDefault(); 
    var stateObject=function(){ 
     let returnObj={} 
     returnObj[this.target.id]=this.target.value 
     return returnObj 
    }.bind(event)(); 

    this.setState(stateObject) 
    }

來源

2017-01-27 05:50:29 GoyaKing

加成@ Shubham的回答，ü可以設置狀態這樣也：

class App extends React.Component { 
 
    constructor(props){ 
 
    super(props) 
 
    this.state={ 
 
     Day:false, 
 
     Open:false, 
 
     Close:true 
 
    } 
 
     this.pushTime = this.pushTime.bind(this); 
 
    } 
 

 
    logState(){ 
 
    console.log(this.state); 
 
    } 
 

 
    pushTime(event){ 
 
    let state = this.state; 
 
    console.log('Clicked ', event.target.id, event.target.value); 
 
    state[event.target.id]=!state[event.target.id]; 
 
    this.setState({state}); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <input type='checkbox' id='Day' name='Day' onClick={this.pushTime} checked={this.state.Day}/> 
 
     <input type='checkbox' id='Open' name='Open' onClick={this.pushTime} checked={this.state.Open}/> 
 
     <input type='checkbox' id='Close' name='Close' onClick={this.pushTime} checked={this.state.Close}/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

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

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

檢查jsfiddle：https://jsfiddle.net/vhavwcbh/

來源

2017-01-27 05:56:53

React setState可重用

回答

相關問題