标签：const 入门 title text react hook state searchTerm return

useState的使用

 代码

const Search = (props: any) => {
  // useState() 采用一个初始 state 作为参数，也可以像这样使用一个空字符串。
  // 使用 state 进行交互，别忘了 import React：
  // 同时它会返回包含两个值的数组，第一个值 searchTerm 表示当前 state；第二个值 setSearchTerm 是 state 的更新函数。
  const [searchTerm, setSearchTerm] = React.useState("");
  const handleChange = (e: any) => {
    const text = e.target.value
    setSearchTerm(text);
  }
  return (
    <>

      <input type="text" onChange={handleChange} />
      <p>
        {searchTerm}
      </p>

    </>
  );
}

下游的组件要使用 state，可以将其作为 props 传递；如果下游组件要更新 state，可以向下传递一个回调处理函数。

function App() {
  const [searchTerm, setSearchTerm] = React.useState("");
  const list = [
    {
      title: "1",
      context: "内容1"
    },
    {
      title: "2",
      context: "内容2"
    },
    {
      title: "12",
      context: "内容12"
    }
  ]
  const listData = list.filter(item => {
   return item.title.toLowerCase().includes(searchTerm.toLowerCase())
  })

  const handleSearch = (text: string) => {
    setSearchTerm(text);
  }
  return (
    <div className="App">
      <header className="App-header">

         <Search onSearch={handleSearch} text={searchTerm}></Search>
        <ul>
          {
            listData.map((item) => {
              return <li>{item.title}/<b>{item.context}</b></li>
            }
            )
          }

        </ul>
      </header>
    </div>
  );
}

const Search = (props: any) => {
  const handleChange = (e: any) => {
    const text = e.target.value
    props.onSearch(text)//调上游传递的方法
  }
  return (
    <>

      <input type="text" onChange={handleChange} />
      <p>
        {props.text}
      </p>

    </>
  );
}

标签：const,入门,title,text,react,hook,state,searchTerm,return
来源： https://www.cnblogs.com/GoTing/p/16661992.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。