无法在文本字段中连续输入字符，因为它在组件中呈现为单独的功能

Question

我想使用以下方法绑定文本字段，但当我在文本字段中输入字符时遇到问题。对于第一个字符，它工作正常，但是当我输入第二个字符时，控件/焦点从文本字段中出来，然后我需要再次单击文本字段以输入第二个字符。我发现这个问题是因为文本字段绑定为组件中的单独函数，但我只需要这种方法，如何解决这个问题？

我尝试过的代码

const Search: React.FC = () => {

   const [addressTest, setAddressTest] = useState<string>('');

   const AdvancedSearch = () => {
      return (
         <>
            <Grid container rowSpacing={0.4} columnSpacing={3} id="advanced_search_section">
               <Grid item xs={12} sm={6} md={3}>
                  <InputLabel htmlFor="address">Address</InputLabel>
                  <TextField
                     value={addressTest}
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                        setAddressTest(event.target.value);
                     }}
                  />
               </Grid>
            </Grid>
         </>
      )
   }

   //Render all the UI fields for search screen
   return (
      <>
         <AdvancedSearch />
      </>
   );
}

export default Search;

Answer 1

能够解决。我们应该将 AdvancedSearch 函数渲染为组件，如下所示。

const Search: React.FC = () => {

   const [addressTest, setAddressTest] = useState<string>('');

   const AdvancedSearch = () => {
      return (
         <>
            <Grid container rowSpacing={0.4} columnSpacing={3} id="advanced_search_section">
               <Grid item xs={12} sm={6} md={3}>
                  <InputLabel htmlFor="address">Address</InputLabel>
                  <TextField
                     value={addressTest}
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                        setAddressTest(event.target.value);
                     }}
                  />
               </Grid>
            </Grid>
         </>
      )
   }

   //Render all the UI fields for search screen
   return (
      <>
         {AdvancedSearch()}
      </>
   );
}

export default Search;