Question

class IndividualPsid extends Component {
  constructor(props) {
    super(props);
      this.state = {
        editData: false,
        newSkuid: this.props.SkuId
      }
    this.updateState = this.updateState.bind(this);
}
updateState(e) {
    const psid = e.target.value;
    this.setState({ newSkuid: psid }, () => {
        this.props.onPsidChange(this.props.id, this.state.newSkuid);
    });
}
render() {
    let member = '';
    if (this.props.editingProp) {
        member = (
            <div>
                <input value={this.state.newSkuid} key={this.props.SkuId + uuidv4()} onChange={this.updateState}
                    className="skuid col-xs-7" />
            </div>
        )
    }
    else {
        member = (
            <div key={this.props.SkuId + uuidv4()} className="skuid col-xs-7" >{this.props.SkuId}</div>
        )
    }
    return (
        <div className="row" >
            <div className="skuname col-xs-5">{this.props.SkuName}</div>
            {member}
        </div>);
 }
}
export default IndividualPsid;

以上是我的子组件代码（Psid.js）。当我单击“编辑”按钮时，输入框显示，然后我在输入框中键入内容，它不显示键入的数字，但是当我单击“保存”时，它会显示更新的部分。所以基本上根据我的知识this.state.newSkuid不会更新输入值。以下是我的父文件（Category.js），它呈现IndividualPsid。

 edit(skuList) {
    if (this.state.editing == false) {
        this.setState({
            text: 'SAVE',
            editing: true
        });
    }
    else {
        this.setState({
            text: 'EDIT',
            editing: false
        });
        this.props.edit_menu_items_api(this.state.changedSkus);
    }
    this.render();
}
   render() {
    return (
        <button className="edit" onClick={() =>                          
     this.edit(this.props.categoryData.productList[0].brandProductSkuList)}>
          {this.state.text}</button>
    )
}

Answer 1

如果我在inputWillReceiveProps函数中单击编辑按钮上的输入框diplaying逻辑，它就可以工作。这是我的孩子组件的代码。

componentWillMount() {
    this.member = <div key={this.props.skuId} className="skuid col-xs-7" >{this.props.skuId}</div>
}
componentWillReceiveProps(nextProps) {
    if (this.props.editingProp !== nextProps.editingProp && nextProps.editingProp) {
        this.member = <div  className="skuid col-xs-7">
            <input defaultValue={this.state.newSkuid} key={this.props.skuId} onChange={this.updateState}
                onBlur={() => { this.props.onPsidChange(this.props.id, this.state.newSkuid) }} />
        </div>
    } else if (this.props.editingProp !== nextProps.editingProp && !nextProps.editingProp) {
        this.member = <div key={this.props.skuId} className="skuid col-xs-7" >{this.props.skuId}</div>
    }
    this.setState({ editData: nextProps.editingProp });

}
render() {
    return (
        <div className="row" >
            <div className="skuname col-xs-5">{this.props.skuName}</div>
            {this.member}
        </div>);
}

输入未显示反应中输入的值

1 个答案: