Question

我有一个组件，可以根据道具（添加失败状态，并根据它是否失败变成红色或保持原始颜色）来更改其渲染方式，是否失败的逻辑为真或false在父组件中。

我想更改失败状态，但只更改onBlur（不更改子组件）。有没有办法传入将更改应用于子prop的onBlur函数？

我尝试了许多不同的方法，例如：

子组件

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

父组件：

    this.props.failed = value;
  }

并在渲染功能中：

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

但这对我没有用。

Answer 1

道具是从父级传递给子级的数据，可通过子级组件中的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} />)
 }
}

在子组件中，模糊时，我们将使用作为prop传递的函数来修改父组件中的状态，从而重新渲染子组件。

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

希望这可以解决您的困惑。

在React中基于onBlur函数更改组件属性

1 个答案: