时间戳

首页 > 解决方案 > 在 React 中基于 onBlur 函数更改组件属性

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

问题描述

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

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

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

子组件

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

父组件：

    this.props.failed = value;
  }

在渲染函数中：

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

但它对我不起作用。

标签： javascriptreactjsreact-redux

解决方案

Props 是从父组件传递给其子组件的数据，并this.props在子组件中可用。

您可以在父组件的状态或 redux/flux 状态（如果您有全局状态管理）中维护您传递给子组件的任何道具。

修改时failed，应在父组件上触发状态更改，这反过来将触发子组件内部的重新渲染。

例如：

在下文中，我们failed作为 prop 传递，并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 上，我们使用作为 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)}
      />
    )
  }
}

另一种方式：

或者，如果不需要 props 或父子关系，您可以消除对父容器的需要，并在子容器中进行状态维护。

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

希望这能解决你的困惑。

推荐阅读