Question

我有父组件，我正在设置状态，调用子组件，从子组件中获取值并再次将其发送给父组件并设置值。

class Parent extends Component {
    constructor(props) {
        super(props);
        this.onInputChange = this.onInputChange.bind(this);

        this.state = {
            value: ""
        };
    }

    emailList = [
        {
            label: "Alen Musk",
            text: "Alen@email.com"
        },
        {
            label: "John smith",
            text: "john@email.com"
        },
        {
            label: "Jacky shroff",
            text: "jacky@email.com"
        },
        {
            label: "Bruce wayne",
            text: "Bruce@email.com"
        }
    ];

    onInputChange(value) {
        this.setState({ value: value });
    }

    render() {
        return (
            <div>

                    <InputSuggestionsComponent
                        label="Email"
                        value={this.state.value}
                        typeaheadItems={this.emailList} 
                        lookupKey="text" 
                        onChange={this.onInputChange}
                    />


            </div>
        );
    }
}

export default Parent;

子组件：

<Field
    onFocus={this.setFocus}
    onBlur={this.onBlurHandler}
    onKeyDown={this.onKeyDown}
    disabled={this.props.disabled}
    value={this.props.value}
    onChange={this.changeHandler}
    onSelect={this.onSelectHandler}
    required
    name={label}
    type={fieldType}
    textColor={currentTheme.text}
    buttonMovable={this.props.type === "password"}
/>

changeHandler = e => {
  this.props.onChange(e.target.value);
  this.checkTypeAhead(this.props.value);
};

setTypeAhead = value => {
    console.log("props value in settypeahead", this.props.value);
    console.log(" value in settypeahead", value);
    const {
        typeaheadItems,
        lookupKey
    } = this.props;
    this.setState({
        showSuggestions: true,
        selectedIndex: null,
        suggestions: typeaheadItems.filter(
          item => (lookupKey ? item[lookupKey] : item).toLowerCase().indexOf(value.toLowerCase()) === 0
        )
    });
};


checkTypeAhead(value) {
    //console.log("check for typeahead ", this.props);
    if (this.props.typeaheadItems && this.props.lookupKey) {
        this.setTypeAhead();
    }
    this.props.onChange(value);
}

现在，当我从onChange获取值并发送给父级以在e.target.value中更新并在此之后打开我的建议列表时，我的孩子this.state.props处理程序会被调用。

但至于第一次，我得到this.props.value作为＆＃34;＆＃34;因为它已在父母中设置。如果我想将值作为使用类型来处理该怎么办？

例如：如果用户输入＆＃34; a＆＃34;，我应该在this.props.value中获得＆＃34; a＆＃34;。

Answer 1

您可能需要更改以下功能：

target

通过记录{{1}}对象参数，您可以找到如何获取用户输入值，然后将其传递给状态对象。

Answer 2

问题是状态更新是异步的。所以当你这样做时

this.props.onChange(e.target.value);
this.checkTypeAhead(this.props.value);

第二行没有收到更新的父状态，因为尚未发生。

解决方案可能是在您的子组件上使用componentDidUpdate生命周期事件，因此您可以在之后执行 从父级获取新道具成分

checkTypeAhead

在您的父母未对componentDidUpdate(prevProps, prevState, snapshot) { if (prevProps.value !== this.props.value) { // check if a new value was passed this.checkTypeAhead(this.props.value); } }进行任何处理的特定情况下，您可以直接使用value。最初的建议可以让你更灵活。

e.target.value

反映中的父子问题

2 个答案: