Question

我正在尝试调用一个方法来更新react应用程序中的状态。状态和方法在父组件中定义，我已将该函数传递给将要执行UI事件的此组件。（从选择标签中选择）。但是我的函数继续从此组件返回undefined。

class Book extends React.Component {
  static propTypes = {
    onShelfChange: PropTypes.func
  }

  handleChange = (event) => {
    this.setState({value: event.target.value})
    console.log('book:', this.props.book.title, 'shelf:', event.target.value)
    onShelfChange(this.props.book.id, event.target.value)
  }
  render() {
  const { book } = this.props

  return(
       <div>
          <li key={choice.id}>
        <div>
          <select value={this.props.value} onChange={this.handleChange}>
            <option value="a">a</option>
            <option value="b">Want to Read</option>
            <option value="c">c</option>
            <option value="d">d</option>
          </select>

Answer 1

您需要在this.props函数之前使用onShelfChange，因为它已从父级发送到此组件。你能改变以下部分：

  handleChange = (event) => {
    this.setState({value: event.target.value})
    console.log('book:', this.props.book.title, 'shelf:', event.target.value)
    this.props.onShelfChange(this.props.book.id, event.target.value)
  }

传递一个函数作为prop来更新parent组件中的状态

1 个答案: