当前位置: 首页 > 面试题库 >

功能setState中的事件目标为null

郎健柏
2023-03-14
问题内容

想象下面某个组件的功能:

handleInputChange(e) {
    // let val = e.target.value; - if I uncomment this, it works.

    // Update text box value
    this.setState(function (prevState, props) {
        return {
          searchValue: e.target.value,
        }
    })
}

和文本框,由上述组件的子组件呈现,并接收handleInputChangeprops

<input type="text" onChange={that.props.handleInputChange} value={that.props.searchValue} />

当我在文本字段中输入内容时,出现错误消息Cannot read property 'value' of null

如果我取消注释handleInputChange函数中的第一行(将文本框值存储val变量中),那么它将很好地工作。想法为什么?


问题答案:

这是因为React进行了事件池 -回调完成后,所有事件的字段都为空,因此您在异步setState回调中将它们视为null 。

请将事件数据复制到变量或调用event.persist()以禁用此行为。

handleInputChange(e) {
  e.persist();

  this.setState(function (prevState, props) {
      return {
        searchValue: e.target.value,
      }
  })
}

要么:

handleInputChange(e) {
  const val = e.target.value;

  this.setState(function (prevState, props) {
      return {
        searchValue: val
      }
  })
}

请参见以下示例:

class Example extends React.Component {

  constructor() {

    super()

    this.state = { }

  }



  handleInputChangeCopy = (e) => {

    const val = e.target.value;



    console.log('in callback');

    console.log(e.target.value);



    this.setState(function (prevState, props) {

        console.log('in async callback');

        console.log(val);



        return {

          searchValue: val

        }

    })

  }



  handleInputChangePersist = (e) => {

    e.persist();

    console.log('in callback');

    console.log(e.target.value);



    this.setState(function (prevState, props) {

        console.log('in async callback');

        console.log({ isNull: e.target === null })



        console.log(e.target.value);



        return {

          searchValue: e.target.value

        }

    })

  }



  handleInputChange = (e) => {

    console.log('in callback');

    console.log(e.target.value);



    this.setState(function (prevState, props) {

        console.log('in async callback');



        console.log({ isNull: e.target === null })

        console.log({ event: e });



        console.log(e.target.value);



        return {

            searchValue: e.target.value

        }

    })

  }



  render() {

    return (

    <div>

      <div>Copy example</div>

      <input

        type="text"

        onChange={this.handleInputChangeCopy}

      />



      <p>Persist example</p>

      <input

        type="text"

        onChange={this.handleInputChangePersist}

      />



      <p>Original example - please note nullified fields of the event in the async callback. <small>Breaks the example, please re-run after a Script error</small></p>

      <input

        type="text"

        onChange={this.handleInputChange}

      />



      <div style={{height: 300}} />

    </div>

    )

  }

}



ReactDOM.render(

  <Example searchValue={"test"} />,

  document.getElementById('app')

)


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>


 类似资料:
  • 如何在JavaFX中为快捷键添加功能键(即F1到F12键)?我用保存按钮。我不需要点击保存按钮,它使系统变得容易

  • 问题内容: 在过去的几天里,我一直在学习React,研究一些有关编写不同元素的不同方式的教程和说明。但是,我最想知道的是- 更新/覆盖组件属性的功能。 例如,假设我有一个包含以下内容的类: 这个例子让我从API获取图像。 鉴于我已经执行了此函数的获取,映射和返回操作-然后,我将使用在API调用中获得的结果来更新状态数组。 我的问题源于我所见过的关于如何更新/覆盖图片状态属性的不同方法。 我看到它以

  • 我在学反应。我读过一篇文章,建议我们使用函数组件,而不是扩展react.component的类,所以我跟着做了。我也使用箭头函数而不是函数关键字。即: 有没有一种方法可以使用setState()来代替setName()、setId()、…等?或者任何建议? 非常感谢!

  • 我正在制作一个CloudFormation模板,以捕获将CloudWatch事件发送到Kinesis Firehose交付流的流程的组件。(它在AWS中工作,通过控制台手动配置。) 当我定义AWS::E通风口::规则时,有一个目标属性需要有效目标的ARN。问题是资源不支持检索其ARN,只返回其逻辑ID。(Fn::GetAtt可用于获取的ARN,但没有。) 我是不是走错了路,或者这只是云阵还不支持的

  • 问题内容: 我目前正在使用freesolo自动完成功能,并且我的特定用例要求在逗号或空格跟随输入文本时创建标记。当前,自动完成功能会在Enter事件上创建标签,但我认为自动完成功能中没有内置任何功能,但支持任何其他事件的标签创建。我想知道我是否缺少任何东西,或者如果我没有,我该如何解决这个问题? 当前,我正在尝试使用Autocomplete中的onInputChange属性来捕获传入的字符串。我检

  • 当我使用Google Tag Manager跟踪链接点击时,它会显示为Google Analytics(分析)中的事件。到目前为止还不错。让我们在GTM中说:类别是{{事件}}/操作是{{单击事件}},标签是{{页面路径}} 现在我将此事件作为分析目标(转换)-而不是AdWords。那么我是对的,我必须再次设定目标,但我们不能从GTM中获得变量吗?所以分类必须像“测试”动作“点击”标签“链接点击”