美文网首页
react hooks userState

react hooks userState

作者: 我的天气很好啦 | 来源:发表于2019-07-18 23:14 被阅读0次

    React引入了React Hooks,简单点说就是可以完全不用类来写组件,可以用函数来写组件。函数使用state只能通过useState函数。
    使用例子

    import React, { useState } from 'react'
    import ReactDOM from 'react-dom'
    
    function App(){
      //useState的参数为初始状态值,返回了一个长度为2的数组,第一个元素就是我们类组件里的state对象,第二个元素是个函数,作用相当于类组件里用的setState。这两个元素的名字可以随便取,
      const [state, setState] = useState({ text: "", checked: false })
      const updateState = partialState => setState(oldState => ({
        ...oldState
        ...partialState
      }))
      return (
        <div>
          <input 
              type="text"
              value={state.text}
              onChange={e => 
                updateState({
                  text: e.target.value
                })    
              }
          />
        <input 
              type="checkbox"
              value={state.checked}
              onChange={() => updateState({ checked: !state.checked })}
          />
          <ul>
            <li>{state.text}</li>
            <li>{state.checked.toString}</li>
          </ul>
      )
    }
    
    const rootElement = document.getElementById('root')
    ReactDOM.render(<App />, rootElement)
    
    

    相关文章

      网友评论

          本文标题:react hooks userState

          本文链接:https://www.haomeiwen.com/subject/yozrlctx.html