Обновление входного значения путем обновления реквизита

Question

у меня есть входное значение, которое я не в состоянии обновить после нажатия на Reset ссылки

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> 

он должен работать.

Вы должны также указать discount в свой компонент SalesLine вместо того, чтобы звонить 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>; 
    } 
}