如何在 React Native 中将 ref 作为参数发送给函数？

Question

我已将自定义 component 导入我的 screen 并在 render() 函数中呈现它。然后，为该自定义组件创建了一个ref。现在，render() 函数看起来就像这样。

render() {
  return (
    <View>
      <MyComponent ref={component => this.myComponent = component} />
    </View>
  )
}

然后，我创建了另一个函数来访问我的自定义组件的状态。我是这样写的。

myFunction = (ref) => {
  ref.setState({ myState: myValue })
}

然后，我这样调用那个函数。

this.myFunction(this.myComponent)

但是，它不起作用。它给了我以下错误。

null is not an object (evaluating 'ref.setState')

其实我需要这个myFunction做的是，

this.myComponent.setState({ myState: myValue })

你能帮我解决这个问题吗？

Answer 1

要使用setState，只需使用组件的上下文（this 关键字）。上下文中也包含您的 ref，因此如果您在一个组件内（不转发给子组件），则无需将其作为参数传递

myFunction = (event) => {
 this.myComponent  // -> points to your ref, DOM element
 this.setState() // use your setState like that
}

如果您想将处理程序传递给子组件，请不要忘记在父组件中绑定您的上下文。参考这个useful topic

编辑：根据您的评论，我猜您想通过调用其他组件中的处理程序来更新父状态。为此，您需要在父组件中创建一个处理程序，绑定上下文并将其作为属性传递给子组件。接下来，您需要在子组件中分配此处理程序。您不能通过参数或 ref 使用 setState 方法传递上下文，这不是它在 javascript 和 react 中的工作方式。

例子：

// ParentComponent.js
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 1,
    };
    this.onChangeHandler = this.onChangeHandler.bind(this);
  }

  onChangeHandler(event) {
    this.setState({
      value: someNewValue // will update state on parent component
    })
  }

  render() {
    return (
      <View>
        <SomeComponent>{this.state.value}</SomeComponent>
        <ChildrenComponent onChangeHandler={this.onChangeHandler} />
      </View>
    );
  }
}

// ChildrenComponent.js
const ChildrenComponent = (props) => (
  <View>
    <Button
      onPress={props.onChangeHandler}
      title="click me to change parent state"
    />
  </View>
);

希望这是你需要的:)

Answer 2

ref 不是你的 this 对象。这是您的组件的 dom。对于 setState，您需要这个组件。

您可以将其作为参数传递。

myFunction(this)

现在您可以在 myFunction 中执行 ref.setState。

function myFunction(ref) {
    ref.setState({ myState: myValue })
}