Question

在React中，我试图通过从子组件传输到其父组件的单选按钮获取值。为此，我在父级中创建了一个函数并将其作为道具传递给子级：

handleOptionChange = e => {
  this.setState({
    selectedOption: e.target.value
  });
};

<RadioRental handleOptionChange="this.handleOptionChange" />;

这是我孩子身上的东西：

class RadioRental extends Component {
  render() {
    return (
      <div className="form-check">
        <label>
          <input
            type="radio"
            name="react-tips"
            value="saloon"
            checked={this.props.selectedOption === "option_saloon"}
            onChange={this.props.handleOptionChange}
            className="form-check-input"
          />
          Saloon car
        </label>
      </div>
    );
  }
}

这会产生以下编译错误：

index.js：1446警告：预期onChange侦听器是一个函数，而得到的值是string类型。

有什么建议吗？

Answer 1

您必须在父母中使用{}表示法：

<RadioRental handleOptionChange={this.handleOptionChange} />;
//------------------------------^-----------------------^

{}表示JavaScript与""是字符串属性。

最终密码

handleOptionChange = e => {
  this.setState({
    selectedOption: e.target.value
  });
};

<RadioRental handleOptionChange={this.handleOptionChange} />;

传递给子级的函数被解释为字符串

1 个答案: