Question

这是我的文件，其中包含输入字段。

class IndividualPsid extends Component {
  constructor(props) {
    super(props);
    this.state = {
        editData: false,
        newSkuid: this.props.SkuId
    }
    this.updateState = this.updateState.bind(this);
 }

 componentWillReceiveProps(nextProps) {
    this.setState({ editData: nextProps.editingProp });
    this.render();
 }

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 type="text" id="skuids" value={this.state.newSkuid} key={'dkj' + uuidv4()} onChange={this.updateState}
                    className="skuid col-xs-7" />
            </div>
        )
    }
    else {
        member = (
            <div key={this.props.SkuId} id="skuids" 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>);
}

这是我将文件传递给上述文件的文件。

class Category extends Component {
 constructor(props) {
    super(props);
    this.state = {
        editing: false,
        text: 'EDIT',
        changedSkus: []
    }
    this.edit = this.edit.bind(this);
    this.onPsidChange = this.onPsidChange.bind(this);
}

onPsidChange(id, psid) {
    const changedSkus = this.state.changedSkus.filter(
        (sku) => (sku.brandProductExternalSkuId != psid)
    );
    changedSkus.push({
        brandProductExternalSkuId: psid,
        brandProductSkuId: id
    });
    this.setState({
        changedSkus: changedSkus
    })
}

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 (
        <div className="show-grid row category-row">
            <div className="col-md-8 text-left category">
                <b>{this.props.categoryData.categoryName}</b>
            </div>
            {this.props.categoryData.productList.length > 0 &&
                <div className="col-md-4 text-right">
                    <button className={this.state.text == "EDIT" ? "edit" : "save"} onClick={() =>
                        this.edit(this.props.categoryData.productList[0].brandProductSkuList)}>
                        {this.state.text}</button>
                </div>
            }
        </div>
    )
}

所以当我点击EDIT按钮时，该字段变得可编辑。当我在输入框中输入内容时，它不显示键入的数字，但是当我单击保存时显示。它也会在每次输入数字后失去焦点。我该如何解决这个问题。编辑功能在类别组件中定义，onclick save调用redux函数。

Answer 1

所以我的输入组件正在重新渲染，因为它没有正常工作。解决这个问题的方法是将它写在render之外。所以我使用了componentWillMount。这是我的新代码。

class IndividualPsid extends Component {
 constructor(props) {
    super(props);
    this.state = {
        editData: false,
        newSkuid: this.props.SkuId
    }
    this.updateState = this.updateState.bind(this);
    this.member = null;
 }
 updateState(e) {
    const psid = e.target.value;
    this.setState({ newSkuid: psid });
 }
 componentWillMount() {
    this.member = <div key={this.props.SkuId + uuidv4()} className="skuid col-xs-7" >{this.props.SkuId}</div>
}

componentWillReceiveProps(nextProps) {
    if (this.props.editingProp !== nextProps.editingProp && nextProps.editingProp) {
        this.member = <div>
            <input defaultValue={this.state.newSkuid} key={this.props.SkuId + uuidv4()} onChange={this.updateState}
                onBlur={() => { this.props.onPsidChange(this.props.id, this.state.newSkuid) }} className="skuid col-xs-7" />
        </div>
    } else if (this.props.editingProp !== nextProps.editingProp && !nextProps.editingProp) {
        this.member = <div key={this.props.SkuId + uuidv4()} 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>);
 }
  }

我在输入框中使用了onBlur事件，这样输入框就不会失去焦点，直到用户输入。

输入键失去对键入的关注，并且在反应中不显示输入值

1 个答案: