Как записать в state то что ввел пользователь в инпут после нажатия кнопки?

Question

[petro505]

Есть задача: когда пользователь вводит в инпут какое-то слово и нажимает кнопку Search, это слово должно быть установлено в качестве значения в поле inputValue. Но у меня нет опыта работы с инпутами и кнопками которые куда-то отправляют значение которое ввел пользователь.

файл App.js:

import Search from ./Search.js
const App = () => {

  const [value, setValue] = useState({
    data: [],
    inputValue: ""
  });

/* Здесь должен быть какой-то такой метод который срабатывает когда считано значение с инпута и нажата кнопка

const какой-то метод = () => {    
      setValue((prev) => ({
       ...prev,
       inputValue:  устанвливаю значением то что ввел пользователь в инпут
     }));
    }; 
*/

/* И возможно нужно еще какой-то такой метод, но не уверен что его нужно. Я чесно плохо понимаю как считывать данные с инпутов. Но в одном коде видел что-то такое. 
    
const updateSearchInput = (e) => {
       setValue((prev) => ({
         searchInput: e.target.value
       }));
     };

*/

return (
    <div>
      <Search     здесь передают атрибуты какие-то />  
      <Table data={value.data}/>
   </div>
  );
};

И есть инпут с кнопкой (файл Search.js)

export default () => {
  return (
    <div>
        <input type="text" />
        <button>Search</button>
    </div>
  );
};

Оно вот так выглядит:



Что мне нужно дописать в коде фaйла App.js и файла Search.js чтобы реализовать задачу?

Answer 1

[0xD34F]

Пусть Search хранит значение, которое вводит пользователь, и принимает обработчик клика по кнопке, которому при вызове будет передаваться значение:

const Search = props => {
  const [ value, setValue ] = React.useState('');

  return (
    <div>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
      <button onClick={() => props.onSearch(value)}>Search</button>
    </div>
  );
};

А в родительском компоненте, соответственно, в Search передаёте функцию, которая обновит что там вам надо:

<Search onSearch={search => setValue({ ...value, inputValue: search })} />

https://jsfiddle.net/fp0dvhrg/

Answer 2

[shsv382]

App.js должен быть stateful-компонентом. Просто отследи onchange на input'е:

onChange(e) {
    this.setState({inputValue: e.target.value})
}