时间戳

首页 > 解决方案 > 替代 Textfield onChange 的行为类似于 HTML onChange？

javascript - 替代 Textfield onChange 的行为类似于 HTML onChange？

问题描述

我有一个嵌套在其他组件中的 Textfield 组件，并将函数指针作为道具向下传递给它。目前，我有一个函数将 Textfield 的内容传递回使用 onChange 调用的根组件。查看 Textfield 的 API，每当进行更改时都会调用此函数，这与 HTML 中的 onChange 方法不同，后者仅在表单元素失去焦点时才调用。

框架的其余部分是用 React 编写的，并且该组件嵌套在 Grid 中的另一个组件中。

function Description(props) {

  const {updateDescription} = props;

  function changeDescription(event) {
    updateDescription(event.target.value);
  }

  return (
    <>
      <br></br>
      <TextField 
          margin="dense" 
          id="desc-input"
          type="text"
          onChange={changeDescription}
          multiline
          fullWidth
      />
    </>
  );  
}

是否有替代方法在每次更改后不调用该函数，而是在 Textfield 失去焦点时调用该函数？

标签： javascriptreactjsmaterial-ui

解决方案

您可以使用onBlur当字段失去焦点时调用的事件

<TextField 
          margin="dense" 
          id="desc-input"
          type="text"
          onBlur={changeDescription}
          multiline
          fullWidth
      />

推荐阅读