javascript - react : onChange callback not firing

Question

当用户选择不同的选择选项时，不会触发 onChange 回调。我正在使用 react-bootstrap 作为我的 FE 组件库。我试过以不同的方式构造回调(例如作为字符串等)，但没有任何运气。提前致谢!

JSX:

                  <Form.Group as={Col} hidden={!showSegments} controlId={segmentId} className="required">
                    <p>I am teaching in this space:</p>
                    <select ref={segmentSelect} name="segmentId" onChange={toggleSchoolBoardVisibility}>
                      { segments.map((x) => (
                          <option value={x.segmentId}>{x.name}</option>
                        )
                      )) }
                    </select>
                  </Form.Group>

JavaScript:

const toggleSchoolBoardVisibility = () => {
  console.log('hi')
}

编辑:onChange 函数位于同一组件中。如果我用 onBlur 或 onFocus 替换 onChange，回调将被调用并按预期工作。

Answer 1

这是可以完美运行的最少代码。 JS Fiddle Link .

我认为您没有正确使用回调函数。

const SelectBox = ({ options }) => {
  const onOptionSelect = (e) => {
    console.log("selected", e.target.value);
  };

  return (
    <React.Fragment>
      <select onChange={(e) => onOptionSelect(e)}>
        {options.map((opt, key) => (
          <option key={key}>{opt}</option>
        ))}
      </select>
    </React.Fragment>
  );
};

const myOptions = ["a", "b", "c", "d"];

ReactDOM.render(
  <SelectBox options={myOptions} />,
  document.getElementById("container")
);