react笔记之受控和非受控组件

责编:menVScode 2017-07-26 23:10 阅读(847)

在react中,组件的状态直接受state、props控制,那么这是一个受控组件。如果一个组件的状态改变的时候,不受react控制的,那么它是非受控组件。

export default class App extends React.Component{
  •         doKeyDown(ev){
  • if(ev.keyCode!==13){return}
  • var value = ev.target.value.trim();
  • ......
  • this.setState({todoData:todoData})
  • }
  • render(){
let {doKeyDown,doDestroy,doClearCompleted} = this; let {todoData} = this.state; let items = null; items = todoData.map((element,i)=>{ return <Item key={i} {...{doDestroy,todo:element}} /> }) return( <div> <header className='header'> <h1>todos</h1> <input type='text' className='new-todo' onKeyDown={doKeyDown} /> </header> <section className='main'> <input type='checkbox' className='toggle-all' /> <ul className='todo-list'> {items} </ul> </section> <Footer /> </div> ) } } ReactDOM.render( <App />, document.getElementById('root') );

        上述代码中,<input type='text' className='new-todo' onKeyDown={doKeyDown} />,是不受react控制的,是一个典型的非受控组件。在input里面输入文字,就是它本身状态的改变,这是它与生俱来的能力。怎么让它收react控制呢?给input添加value='',然后你就会发现input输不进内容了,这说明它已经接受了react控制了,按下按键的行为,已经不能改变这些状态了。

        如果在ipnut中添加value='menvscode'时,会报错,如果你想要得到一个初始化的值,你可以将value改成defaultValue,但是它还是不受控的。

export default class App extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			todoData : [],
			inputValue : ''
		}
		this.inputChange = this.inputChange.bind(this);
	}
        
  •     doKeyDown(ev){
  • if(ev.keyCode!==13){return}
  • var value = this.state.inputValue;
  • ......
  • this.setState({todoData:todoData})
  •     }
inputChange(ev){ this.setState({ inputValue:ev.target.value }) } render(){ let {doKeyDown,doDestroy,doClearCompleted,inputChange} = this; let {todoData,inputValue} = this.state; let items = null; items = todoData.map((element,i)=>{ return <Item key={i} {...{doDestroy,todo:element}} /> }) return( <div> <header className='header'> <h1>todos</h1> <input type='text' className='new-todo' value={inputValue} onChange={(ev)=>{inputChange(ev)}} onKeyDown={doKeyDown} /> </header> <section className='main'> <input type='checkbox' className='toggle-all' /> <ul className='todo-list'> {items} </ul> </section> <Footer /> </div> ) } }

        现在input能输入内容了,这是因为在输入文字的时候,input接收了onChange的事件。当事件执行的时候,更新了inputValue的值,然后更新state,最后input得到新的value值了。受控好处是,一开始doKeyDown事件中,是通过ev.target.value来获取值的,现在可以直接用this.state.inputValue,我们可以对这个值进行相关操作在输出。

标签: react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码