如何将用户输入的内容设置为状态？

Question

我有一个字段 searchInput 在我的 useState()文件Home.js):

const Home = () => {

  const [value, setValue] = useState({
    listCategory: [],
    searchInput: ""
  });

// THERE SHOULD BE A METHOD/METHODS WHO IMPLEMENT MY TASK 

return (
    <div>
      <Search value={.....} onUpdateSearchInput={......} onSetValue={......}/>  
      <Table dataAttribute={value.listCategory}/>
   </div>
  );
};

我也有文件 Search.js。

export default ({ value, onUpdateSearchInput, onSetValue }) => {
  return (
    <div>
        <input type="text" onUpdateSearchInput={......} value={......}/>
        <button onClick={..........}>Search</button>
    </div>
  );
};

我有这样一个任务：

• 当用户 进入 进入 搜索输入 按键 检索 这个词必须在字段中设置为值 searchInput.

需要写什么方法来实现？

我需要写什么来代替 ....... 在两个文件的所有代码中？

表.js

export default (props) => (
  <table className="table">
    <thead className="table-head">
      <tr>
        <th onClick={props.changeSortAscDesc}>ID <small>{props.sortAscDesc}</small></th>  
        <th>TITLE</th>
        <th>CREATED_AT</th>
        <th>UPDATED_AT</th>
      </tr>
    </thead>
    <tbody className="table-body">
       {props.dataAttribute.map(item => (
        <tr key={item.id}>
          <td>{item.id}</td>
          <td>{item.title}</td>
          <td>{item.created_at}</td>
          <td>{item.updated_at}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

Answer 1

这是我要做的。我将通过 state 从 Home 到 Search. 基本上是这样 value ＆amp。onSetValue ＆amp;然后当 Search 按钮被调用，我将调用父组件 onUpdateSearchInput.

主页.js

import React from "react";
import Search from "./Search";
import Table from "./Table";

const Home = () => {
  // use only 1 state for `value` & another state for `listCategory`
  // for easier debugging & better for separation of concerns
  const [value, setValue] = React.useState("");
  const [listCategory, setListCategory] = React.useState([]);

  return (
    <div>
      <Search
        value={value}
        onUpdateSearchInput={() => {
          console.log(value);
        }}
        onSetValue={value => setValue(value)}
      />
      <Table dataAttribute={listCategory} />
    </div>
  );
};

export default Home;

搜索.js

import React from "react";

const Search = ({ value, onUpdateSearchInput, onSetValue }) => {
  return (
    <div>
      <input
        type="text"
        onChange={e => onSetValue(e.target.value)}
        value={value}
      />
      <button onClick={() => onUpdateSearchInput(value)}>Search</button>
    </div>
  );
};

export default Search;

表.js

import React from "react";

const Table = ({ changeSortAscDesc, sortAscDesc, dataAttribute }) => {
  console.log({ dataAttribute });
  return (
    <table className="table">
      <thead className="table-head">
        <tr>
          <th onClick={changeSortAscDesc}>
            ID <small>{sortAscDesc}</small>
          </th>
          <th>TITLE</th>
          <th>CREATED_AT</th>
          <th>UPDATED_AT</th>
        </tr>
      </thead>
      <tbody className="table-body">
        {dataAttribute.map(item => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.title}</td>
            <td>{item.created_at}</td>
            <td>{item.updated_at}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

这样做是可以的，因为它只是1级深。如果管理状态变得更难，你可以尝试使用React Context或状态管理库，如 MobX 或 超脑