javascript - 如何返回从 parent 那里作为 props 传递的函数的参数

Question

我试图在用户按下子级中的按钮后在父级中运行一个函数。

它在渲染子项时运行该函数，而不是在单击它时运行该函数。

这是我的 parent :

class Parent extends Component {
  constructor(props) {
    super(props);

    this.changeStatus = this.changeStatus.bind(this);
  }

  changeStatus(status) {
    console.log(status);
  }

  render() {
    return (
      <Child
        statusChange={this.statusChange}
      />
    }
  }
}

这是我的 child

class Child extends Component {
  render() {
    const { changeStatus } = this.props;

    return (
      <TouchableOpacity onPress={changeStatus("go")}>
        <Text>Text</Text>
      </TouchableOpacity>
    );
  }
}

Answer 1

您应该传递一个函数，而不是在 render 内调用它。

class Child extends Component {
  render() {
    const { changeStatus } = this.props;

    return (
      <TouchableOpacity onPress={() => changeStatus("go")}>
        <Text>Text</Text>
      </TouchableOpacity>
    );
  }
}

UPD

is there a way to do it without an arrow function inside render

正常功能应该可以工作。 onPress={onPress} 其中function onPress() {...}。或者您可以使用 ES5ivy 方式 onPress={changeStatus.bind(this, 'go')}

如果你根本不想在渲染中创建新函数，你可以这样做

class Child extends Component {

  constructor(...args) {
    super(...args)
    this.changeStatus = this.changeStatus.bind(this)
  }
  changeStatus() {
     this.props.changeStatus('go')
  }
  render() {    
    return (
      <TouchableOpacity onPress={this.changeStatus}>
        <Text>Text</Text>
      </TouchableOpacity>
    );
  }
}