Question

我有一个嵌套在其他组件中的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失去焦点时调用该函数？

Answer 1

您可以使用onBlur事件，该事件在字段失去焦点时被调用

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

行为类似于HTML onChange的Textfield onChange的替代方法？

1 个答案: