Изменение реквизита компонента на основе функции onBlur в React

Question

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

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

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

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

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

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

    this.props.failed = value;
  }

и в функции рендеринга:

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

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

Answer 1

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

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

При изменении 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} />)
 }
}

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

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)}
      />
    )
  }
}

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

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

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)}
      />
    )
  }
}

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