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

您致电道具string domain = "ABC"; domain = domain.Contains(".") ? domain.Substring(domain.IndexOf(".")) : string.Empty;，但您使用的是value。如果将其更改为

this.props.discount

它应该有用。

您还应该在<input value={this.props.value} onChange={this.props.onDiscountChanged}> </input>组件中将discount置于状态，而不是手动调用SalesLine。

forceUpdate

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

通过更新道具更新输入值

2 个答案: