React系列-非受控组件

定义

非受控组件：表单数据不受控于state的（未绑定value），使用React ref从DOM节点中获取表单数据的组件

class App extends React.Component {


    handleSubmitClick(e) {
        e.preventDefault();
        console.log(this.refs.usernameRef.value) //打印输入的值
        console.log(this.refs.passwordRef.value) 
    }

    handleResetClick(e) {
        e.preventDefault();
    }
 
    render() {

        return (
            <form>
                <p>
                    username：
                    <input
                        type="text"
                        placeholder="username"
                        ref='usernameRef'
                    />
                </p>
                <p>
                    password：
                    <input
                        type="password"
                        placeholder="this is password "
                        ref='passwordRef'
                    />
                </p>
                <p>
                    <button onClick={this.handleSubmitClick.bind(this)}>login</button>
                    <button onClick={this.handleResetClick.bind(this)}>reset</button>
                </p>

            </form>
        )
    }
}


ReactDOM.render(
    <App />,
    document.body
)

等效于:

 return (
            <form onSubmit={this.handleSubmitClick.bind(this)}>
                <p>
                    username：
                    <input
                        type="text"
                        placeholder="username"
                        ref='usernameRef'
                    />
                </p>
                <p>
                    password：
                    <input
                        type="password"
                        placeholder="this is password "
                        ref='passwordRef'
                    />
                </p>
                <p>
                    <button type='submit'>login</button>
                    <button onClick={this.handleResetClick.bind(this)}>reset</button>
                </p>

            </form>
        )

推荐方式

全部代码:

import ReactDOM from 'react-dom';
import React from 'react'

class App extends React.Component {

    constructor(props) {
        super(props);
        this.handleSubmitClick = this.handleSubmitClick.bind(this)
        this.handleResetClick = this.handleResetClick.bind(this)
        this.usernameRef = React.createRef();
        this.passwordRef = React.createRef();//推荐方式
        this.genderRef = React.createRef();
        this.fileRef = React.createRef();
    }


    handleSubmitClick(e) {
        e.preventDefault();
        console.log(
            this.usernameRef.current.value,
            this.passwordRef.current.value,
            this.genderRef.current.value,
            this.fileRef.current.files[0]
        )

    }

    handleResetClick(e) {
        e.preventDefault();

    }

    render() {

        return (
            <form onSubmit={this.handleSubmitClick}>
                <p>
                    username：
                    <input
                        type="text"
                        placeholder="username"
                        ref={this.usernameRef}
                    />
                </p>
                <p>
                    password：
                    <input
                        type="password"
                        placeholder="this is password "
                        ref={this.passwordRef}
                    />
                </p>
                <p>
                    <select
                        //form field默认值 ---> 组件挂载完毕后进行更新,不会导致DOM的任何更新
                        defaultValue="female"
                        ref={this.genderRef}
                    >
                        <option value="male">男</option>
                        <option value="female">女</option>
                    </select>
                </p>
                <p>
                    <input
                        type='file'
                        ref={this.fileRef}
                    />
                </p>

                {/* <input type='radio' defaultChecked={true}/>
                <input type='checkbox' defaultChecked={true}/> */}
                <p>
                    <button type='submit'>login</button>
                    <button onClick={this.handleResetClick}>reset</button>
                </p>

            </form>
        )
    }
}


ReactDOM.render(

    <App />,
    document.body

)

受控组件与非受控组件使用场景

原文:受控组件与非受控组件之间的对比(https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/)

非受控组件使用场景小结:

• 需要验证的情况下的提交
• 需要取回一次性值的场景(比如提交)

一般简单表单使用非受控组件,复杂的则使用受控组件.