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

Question

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

TTBOMK у этого нет реальной технической причины, просто Stroustrup при создании языка считал это лучшим дефолтом. (В этом он аналогичен правилу, что rvalues не подразумевает привязку к ссылкам не const.)

Вы можете легко обойти это, чтобы явное использование версий базового класса в области производного класса:

class base {
public:
  void f(int);
  void g(int);
};

class derived : public base {
public:
  using base::f;
  void f(float);
  void g(float); // hides base::g
};

или путем прямого вызова:

derived d;
d.base::g(42); // explicitly call base class version

0

javascript reactjs react-redux

задан Ehsan O 18 March 2019 в 23:32

1 ответ

Другие вопросы по тегам:

javascript reactjs react-redux

Похожие вопросы:

score 0 · 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)}
      />
    )
  }
}

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

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

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

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