Как отправить ссылку на функцию в качестве параметра в React Native?

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
}

Не забудьте связать свойконтекст в родительском компоненте, если вы хотите передать обработчик дочерним компонентам.Обратитесь к этой полезной теме

РЕДАКТИРОВАТЬ: на основе вашего комментария, я думаю, вы хотите обновить родительское состояние, вызвав обработчик в каком-либо другом компоненте.Для этого вам нужно создать обработчик в родительском компоненте, связать контекст и передать его как свойство дочернему компоненту.Далее вам нужно назначить этот обработчик в вашем дочернем компоненте.Вы не можете передать контекст с помощью метода setState через аргумент или ссылку, это просто не то, как он работает в javascript и реагирует.

Пример:

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

ссылка не ваш этот объект.это дом для вашего компонента.Для setState вам нужен этот компонент.

вы можете передать это в качестве аргумента.

myFunction(this)

Теперь вы сможете сделать ref.setState в myFunction.

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