Question

我正在使用React.JS和react-bootstrap创建Web应用程序。

我想做的是当用户单击下面的

时

<Radio name="radioGroup" onChange={console.log("hello")} inline></Radio>

然后控制台日志将输出为

hello

但是我没有得到预期的输出。

整个代码

用户单击时将调用的功能

  renderApptype(data) {
    if(data!=null){
      const id=data.id;
      return (
        <tr key={data.id}>
          <td key={data.id}>
            <Radio name="radioGroup" onChange={console.log("hello")} inline></Radio>
          </td>
        </tr>
      );
    }
  }

渲染

            <table className="table">
              <thead>
                <tr>
                  <th>App Type</th>
                </tr>
              </thead>
              <tbody>
                <FormGroup>
                  { this.props.data != null ? this.props.data.map(this.renderApptype) : null }
                </FormGroup>
              </tbody>
            </table>

Answer 1

解决方案正在编写

onChange={() => {console.log("hello")}}

为什么这样工作？ onChange获取事件处理程序，它是一个函数，在发生onChange事件时执行。您没有给onChange函数提供功能，而是给了它一个块。

更好的解决方案是：

const handleOnChangeEvent = () => {
  console.log("hello")
}

onChange = {handleOnChangeEvent}

顺便说一句，在您的渲染函数中，我将更改

this.props.data != null

收件人：

this.props.data !== null

在javascript中了解===。

Answer 2

要使该事件正常进行，您需要将其绑定。

以这种方式尝试：

onChange={() => console.log("hello")}

您还可以找到有关如何Handle Events on React

的更多信息。

无线电react-bootstrap不调用onClick事件

2 个答案: