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

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

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

myFunction(this)

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

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

Answer 2

要使用setState，只需使用组件的上下文（this关键字）。上下文中也有您的引用，因此，如果您位于一个组件内（则不向下传递给子级），则无需将其作为参数传递

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

如果要将处理程序传递给子组件，请不要忘记将上下文绑定到父组件中。请参阅此useful topic

编辑：根据您的评论，我想您想通过在其他组件中调用处理程序来更新父状态。为此，您需要在父组件中创建一个处理程序，绑定上下文并将其作为属性传递给子组件。接下来，您需要在子组件中分配此处理程序。您无法使用setState方法通过实参或ref传递上下文，但这不是它在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>
);

希望这是您所需要的：）

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

2 个答案: