React: onChange回调函数未触发

Question

当用户选择不同的下拉框选项时，onChange回调函数没有触发。我正在使用react-bootstrap作为我的前端组件库。我已经尝试以不同的结构来构建回调函数（例如字符串等），但是没有任何运气。谢谢！

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函数位于同一组件中。如果我将onChange替换为onBlur或onFocus，则回调被调用并按预期工作。

- AKang123.

---

是的。没有运气 :( - AKang123.

这段代码对我来说是有效的。请提供一个可重现的代码示例，以便我们可以尝试帮助解决问题。在React中，所有的代码都是JavaScript，你所指的HTML实际上是JSX（JavaScript）。请提供更多的上下文信息，例如change函数的位置。 - Brian Thompson

在此处查看工作示例：https://codesandbox.io/s/dazzling-dream-6ocyz?file=/src/App.js。 - Brian Thompson

@BrianThompson 我已经编辑了我的问题。请让我知道是否澄清了问题。 - AKang123.

@ARaj123，不幸的是这并没有帮助。正如在codesandbox中所示，onChange在正常情况下确实有效。因此，我们需要您提供一个运行示例，以展示它无法正常工作，以便我们可以根据您的条件进行测试。 - Brian Thompson

Answer 1

这是能够完美运行的最小代码。JS Fiddle链接。

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

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")
);

- Mohsin Hayat

Answer 2

我建议您使用react-select..它高效且易于使用 https://www.npmjs.com/package/react-select

- Sanoodia