Реакция родителей на ребенка

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 как "", как это было установлено в parent. Что делать, если я хочу получить значение в качестве типов использования в?

Например: если пользователь вводит «a», я должен получить «a» в this.props.value.

Answer 1

Проблема в том, что обновление состояния выполняется асинхронно. Итак, когда вы делаете

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

вторая строка не получает обновленное родительское состояние, так как оно еще не произошло.

Решением может быть использование события жизненного цикла componentDidUpdate в вашем дочернем компоненте, чтобы вы могли выполнить checkTypeAhead only после того, как вы получите новые реквизиты от родительский компонент.

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. Оригинальное предложение дает вам больше гибкости.

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

Answer 2

Вам может потребоваться изменить свою функцию, как показано ниже:

onInputChange(target) {
    console.log('target obj:', target);  // also try to log what you get 
    this.setState({ value: target.value });
}

Записав параметр объекта target, вы можете найти, как вы можете получить введенное пользователем значение, а затем передать его в состояниеобъект.