时间戳

首页 > 解决方案 > 如何通过反应中的另一个组件访问组件中输入标签的值

reactjs - 如何通过反应中的另一个组件访问组件中输入标签的值

问题描述

我基本上是反应和js的新手。我想在 Input 中访问 input 的值，以便我可以在他打字时给他一个提示（例如，他键入 New 并且他将 New york 视为该输入表单的占位符）。任何帮助，将不胜感激。

请注意，我只能更改 app.js 文件

应用程序.js：

import React from 'react';
import Input from './Input.js';
import Cities from './cities.json';

function App() {
   return <div>
      <Input
      />
   </div>
}

export default App;

输入.js：

import React from 'react';

const Input = ({handleChange, hint}) => {
  return (
    <div className="input">
      <label htmlFor="input" data-testid="hint">
        {hint}
      </label>
      <input
        data-testid="input"
        type="text"
        id="input"
        onChange={handleChange}
      />
    </div>
  );
};

export default Input;

标签： reactjs

解决方案

有很多方法可以做到这一点。最简单的方法是在您的 App 组件中设置状态以跟踪输入的值，并向输入组件传递一个handleChange更新状态的函数：

function App() {
   // set up state to keep track of the input value
   const [inputValue, setInputValue] = React.useState('');

   // declare a function to update the state when the input changes
   const handleChange = event => setInputValue(event.target.value);

   // pass the value and the change handler to the input
   return <div>
      <Input
        value={inputValue}
        handleChange={handleChange}
      />
   </div>
}

通过这种设置，App 组件知道（并负责）输入的值，并可以用它做其他事情。

传递给处理程序的event参数将包含您需要的有关通过其target属性输入的所有信息，包括新值。

在此处阅读useState并在此处阅读受控输入。

推荐阅读