Question

当我尝试访问event内部的事件一个回调时，无法访问this.setState中的this.setState对象。它会以Uncaught TypeError: Cannot read property 'value' of null的形式抛出错误，关于如何访问它的任何建议？

注意：当选择dropdrown中的值时，将调用getReportType

以下是Class部分

getReportType(event) {
      console.log(event.target.value) //MetricsByContent
      this.setState(prevState => ({
        metricsParams: {
            ...prevState.metricsParams,
            reportType: event.target.value
        }
      }))
    }

以下是render（）部分

render() {
      return (
          <div
              <select id="metricsDropDown" className="browser-default" onChange={this.getReportType}>
                <option value="MetricsByContent">Metrics By Content</option>
                <option value="MetricsByUser">Metrics By User</option>
              </select>
        </div>
      )
    }

Answer 1

React将清除事件对象，如果要在setState回调中使用它，则可以使用event.persist()或将值复制到另一个变量中

根据React docs

SyntheticEvent已合并。这意味着SyntheticEvent 对象将被重用，并且所有属性将在事件回调已被调用。这是出于性能原因。如这样，您将无法以异步方式访问事件。

getReportType(event) {
      event.persist();
      this.setState(prevState => ({
        metricsParams: {
            ...prevState.metricsParams,
            reportType: event.target.value
        }
      }))
    }

或

getReportType(event) {
      const value = event.target.value;
      this.setState(prevState => ({
        metricsParams: {
            ...prevState.metricsParams,
            reportType: value
        }
      }))
    }

事件对象在this.setState（）中不可访问-React.js

1 个答案: