javascript - Reactjs将数据传递给父级不起作用

Question

我正在尝试将选择的值从组件传递SelectInput给Result组件，但是出现错误

未捕获的 TypeError：this.props.onSelectedChange 不是 SelectInput.handleChange 的函数

class SelectInput extends React.Component {

    constructor(props) {
        super(props)       
        this.handleChange = this.handleChange.bind(this)
    }
    handleChange(event) {
        console.log(event.target.value)        
        console.log('event.target.value')        
        this.props.onSelectedChange(event.target.value) //here getting error
    }

    render() {
        return (
            <select  onChange={this.handleChange}>
                <option value="item1">item1</option>
                <option value="item2">item2</option>
                <option value="item3">item3</option>
            </select>
        )
    }
}

class Result extends React.Component {
    constructor(props) {
        super(props)
        this.state = { result: '' }
    }
    render() {
        return (
            <h2>Selected :{this.state.result}</h2>
        )
    }
}
class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = { selected: '' }
        this.handleOnSelect = this.handleOnSelect(this)
    }
    handleOnSelect(selected) {
        console.log(selected)
        //this.setState({ selected: selected })
    }
    render() {
        return (
            <div>
                <SelectInput onSelectedChange={this.handleOnSelect} />
                <Result />
            </div>
        )
    }
}


ReactDOM.render(<App />, document.getElementById('root'))

编辑

如下更改行后，错误消失但所选值未传递给父级

 <SelectInput onSelectedChange={()=>this.handleOnSelect} />

标签： javascriptreactjs

Answer 1

class SelectInput extends React.Component {

    constructor(props) {
        super(props)       
        this.handleChange = this.handleChange.bind(this)
    }
    handleChange(event) {
        console.log(event.target.value)        
        console.log('event.target.value')        
        this.props.onSelectedChange(event.target.value) //here getting error
    }

    render() {
        return (
            <select  onChange={this.handleChange}>
                <option value="item1">item1</option>
                <option value="item2">item2</option>
                <option value="item3">item3</option>
            </select>
        )
    }
}

class Result extends React.Component {
    constructor(props) {
        super(props)
        this.state = { result: '' }
    }
    render() {
        return (
            <h2>Selected :{this.state.result}</h2>
        )
    }
}
class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = { selected: '' }
        this.handleOnSelect = this.handleOnSelect(this)
    }
    handleOnSelect(selected) {
        console.log(selected)
        //this.setState({ selected: selected })
    }
    render() {
        return (
            <div>
                <SelectInput onSelectedChange={()=>this.handleOnSelect} />
                <Result />
            </div>
        )
    }
}

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
  <div id="root"></div>

你必须像这样调用函数。

<SelectInput onSelectedChange={()=>this.handleOnSelect} />

这是完整的代码。

class SelectInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    console.log(event.target.value);
    console.log("event.target.value");
    this.props.onSelectedChange(event.target.value); //here getting error
  }

  render() {
    return (
      <select onChange={this.handleChange}>
        <option value="item1">item1</option>
        <option value="item2">item2</option>
        <option value="item3">item3</option>
      </select>
    );
  }
}

class Result extends React.Component {
  constructor(props) {
    super(props);
    this.state = { result: "" };
  }
  render() {
    return <h2>Selected :{this.state.result}</h2>;
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { selected: "" };
    this.handleOnSelect = this.handleOnSelect(this);
  }
  handleOnSelect(selected) {
    console.log(selected);
    //this.setState({ selected: selected })
  }
  render() {
    return (
      <div>
        <SelectInput onSelectedChange={() => this.handleOnSelect} />
        <Result />
      </div>
    );
  }
}