Question

我是新手做出反应，我想知道这是否是从输入表单中获取值的正确方法（有点质量代码）。 import来自＆＃39; react＆＃39;;

的反应

class Form extends React.Component {
    constructor() {
        super();
        this.state = {
            nameValue: '',
            ageValue: ''
        }
    }
    onChangeName(event) {
        this.setState({
            nameValue:event.target.value
        });

    }
    onChangeAge(event) {
        this.setState({
            ageValue: event.target.value
        });
    }
    showValue(){
        alert('name '+ this.state.nameValue + ' age: ' + this.state.ageValue)
    }
    render() {
        return (
            <form>
                <label>Name:
                    <input type="text" onChange={this.onChangeName.bind(this)}/>
                </label>
                <label>Age:
                    <input type="text" onChange={this.onChangeAge.bind(this)}/>
                </label>
                <input type="submit" value="Submit" onClick={this.showValue.bind(this)}/>
            </form>

        );
    }
}
export default Form;

我的意思是我听说它做出反应的方式是这样的，每个组件都应该有点独立并拥有自己的行为。顺便说一句代码工作只是要求我从我这里得到项目的质量。或我应该只为按钮添加一个事件并使其他组件无状态，即2个输入字段

Answer 1

是的，这是正确的方法。

<强>建议：

1。您可以通过单个更改功能处理所有change function元素，而不是使用两个不同的input。为此，使用input元素分配名称（与状态变量名称相同）属性，并在change内部state函数访问event.target.name变量名称{{1}并更新。

运行此代码段：

class Form extends React.Component {
    constructor() {
        super();
        this.state = {
            nameValue: '',
            ageValue: ''
        }
        this.commonChange = this.commonChange.bind(this);
        this.showValue = this.showValue.bind(this);
    }

    commonChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    showValue(){
        event.preventDefault();
        alert('name '+ this.state.nameValue + ' age: ' + this.state.ageValue)
    }

    render() {
        return (
            <form>
                <label>Name:
                    <input type="text" name="nameValue" onChange={this.commonChange}/>
                </label>
                <label>Age:
                    <input type="text" name="ageValue" onChange={this.commonChange}/>
                </label>
                <input type="submit" value="Submit" onClick={this.showValue}/>
            </form>

        );
    }
}

ReactDOM.render(<Form/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

2。您没有按state值控制输入元素（不使用输入元素的值属性），只是将值存储在{ {1}}，在提交通话期间获取这些值。因此，不需要将值存储在状态变量中，您可以使用uncontrolled component，并使用ref来获取值。

像这样定义ref：

state

并按<input type="text" ref={el => this.nameValue} />

访问该值

运行此代码段：

this.nameValue.value

class Form extends React.Component {
    constructor() {
        super();
        this.showValue = this.showValue.bind(this);
    }

    showValue(){
        alert('name '+ this.nameValue.value + ' age: ' + this.ageValue.value)
    }

    render() {
        return (
            <form>
                <label>Name:
                    <input type="text" ref={el => this.nameValue=el} />
                </label>
                <label>Age:
                    <input type="text" ref={el => this.ageValue=el} />
                </label>
                <input type="submit" value="Submit" onClick={this.showValue}/>
            </form>

        );
    }
}

ReactDOM.render(<Form/>, document.getElementById('app'))

3。始终在<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app'/>中定义functions的绑定。

查看此答案以获取更多详细信息：why do you need to bind a function in a constructor

在React.js中获取输入值的正确方法

1 个答案: