通過更新道具

Question

我有一個輸入值，我無法點擊重置連接

class DiscountEditor extends Component { 
    render() { 
     <div className="inline field"> 
      <a className="ui reset" onClick={this.props.onReset}>Reset</a> 

      <input 
       value={this.props.discount} 
       onChange={this.props.onDiscountChanged}> 
      </input> 
     </div> 
    } 
} 

class SalesLine extends Component { 
    onReset(lineItem) { 
     this._discount = 0; 
     this.forceUpdate(); 
    } 

    render() { 
     <DiscountEditor 
      value={this._discount} 
      onChange={this.props.onDiscountChanged} 
      onReset={this.onReset.bind(this)} 
     </DiscountEditor> 
    } 
} 

後更新換代的輸入值當我點擊復位按鈕DiscountEditor組件將被再次渲染和this.props.discount有正確的值爲零，但輸入值將保持不變，並且不會更新爲零。 爲什麼？

Answer 1

您稱爲支柱value但您使用的是this.props.discount。如果將其更改爲

<input 
    value={this.props.value} 
    onChange={this.props.onDiscountChanged}> 
</input> 

它應該工作。

您還應該在您的SalesLine組件中將discount置於狀態，而不是手動調用forceUpdate。

class SalesLine extends Component { 
    constructor(props) { 
     super(props); 
     this.state = {discount: 0}; 
    } 

    onReset(lineItem) { 
     this.setState({discount: 0}); 
    } 

    render() { 
    return <DiscountEditor 
     value={this.state.discount} 
     onChange={this.props.onDiscountChanged} 
     onReset={this.onReset.bind(this)} 
    </DiscountEditor>; 
    } 
} 

Answer 2

分配_discount在構造函數中，並從那裏上更新狀態的狀態

class SalesLine extends Component { 
    constructor(props) { 
     super(props); 
     this.state = {discount: this.props.discount}; 
    } 

    onReset(lineItem) { 
     this.setState({discount: 0}); 
    } 

    render() { 
    return <DiscountEditor 
     value={this.state.discount} 
     onChange={this.props.onDiscountChanged} 
     onReset={this.onReset.bind(this)} 
    </DiscountEditor>; 
    } 
}