Блог

У меня есть компонент, который я могу изменить способ его отображения на основе реквизита (добавлено состояние сбоя, и в зависимости от того, происходит сбой или нет, он становится красным или остается оригинальным цветом), логика того, является ли сбой true или false находится в родительском компоненте.

Я хочу изменить состояние сбоя, но только onBlur (без изменения дочернего компонента). Есть ли способ передать onBlur функцию, которая применяет изменения к дочернему реквизиту?

Я пробовал несколько разных вещей, таких как:

Дочерний компонент:

 <input 
  failed={failed}
  onBlur={onBlur}
/>
  

Родительский компонент:

 handleBlur(value) {
  this.props.failed = value;
}
  

В функции визуализации:

 onBlur={() => this.handleBlur(newValue)}
  

Но у меня это не сработало.

Реквизит — это данные, которые передаются от родительского элемента к его дочерним элементам и становятся доступными через this.props дочерний компонент.

Вы сохраняете любой реквизит, который вы передаете дочернему компоненту, либо в состоянии родительского компонента, либо в состоянии redux / flux (если у вас есть глобальное управление состоянием).

При failed изменении должно быть инициировано изменение состояния родительского компонента, что, в свою очередь, вызовет повторный рендеринг внутри дочернего компонента.

Например:

Далее мы передаем его failed как реквизит, а onFailureUpdate функционируем как триггер обратного вызова дочернего компонента из родительского.

 class Parent extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   failed: false
  }
 }

 onFailureUpdate = (value) => {
   this.setState({
    failed: value
   });
 }

 render() {
  return (<ChildComponent failed={this.state.failed} onFailureUpdate={this.onFailureUpdate} />)
 }
}
  

В дочернем компоненте, в blur, мы используем функцию, которую мы передали в качестве реквизита, для изменения состояния в родительском компоненте, который, в свою очередь, повторно отобразит дочерний компонент.

 class ChildComponent extends React.Component {
  onBlur = (e) => {
    this.props.onFailureUpdate(e.target.value);
  }

  render() {
    return (
      <input 
        value={this.props.failed}
        onBlur={(e) => this.onBlur(e)}
      />
    )
  }
}
  

Другой способ:

Или, если нет необходимости в реквизитах или отношениях родитель-потомок, вы можете устранить необходимость в родительском контейнере и перейти к обслуживанию состояния в дочернем.

 class RewrittenChildComponentWithState extends React.Component {
  constructor() {
   this.state = {
    failed: false
   };
  }

  onBlur = (e) => {
    this.setState({
     failed: e.target.value
    });
  }

  render() {
    return (
      <input 
        value={this.state.failed}
        onBlur={(e) => this.onBlur(e)}
      />
    )
  }
}
  

Надеюсь, это решит вашу путаницу.