Javascript 通过更新道具更新输入值

我有一个输入值，单击重置链接后无法更新

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

当我单击重置按钮时，折扣编辑器组件将再次呈现，this.props.discount具有正确的值，即零，但输入值将保持不变，不会更新为零。 为什么呢？

您调用了道具值，但您使用的是this.props.discount。如果你把它改成

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

您调用了道具值，但使用的是this.props.discount。如果你把它改成

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

---

在构造函数中为您的状态分配折扣，然后从那里更新状态

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

---

在构造函数中为您的状态分配折扣，然后从那里更新状态

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