Функция, переданная потомку, интерпретируется как строка

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