Question

我有一个非常简单的表格，其中包含Name和Age。 Name和Age状态已更新onChange。但是，一旦输入完名称和年龄，在最底部，我的p标签就不会返回名称和年龄。

我相信我的commonChange()函数是正确的，但是不确定为什么在输入数据后为什么不显示姓名和年龄。

我的代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './normalize.css';
import './index.css';

class Form extends React.Component{
    constructor(){
        super();
        this.state = {
            nameValue: '',
            ageValue: ''
        }
        this.commonChange = this.commonChange.bind(this);
    }

    commonChange(event){
        this.setState(
        {
            [event.target.name]: event.target.value
        });
    }

    render(){
        return (
            <div>
                <h1>Name and Age Return</h1>
                <form>
                    <label>Name:
                        <input type="text" name="nameValue" onChange={this.commonChange} />
                    </label><br />
                    <label>Age:
                        <input type="text" name="ageValue" onChange={this.commonChange} />
                    </label>
                </form>
                {this.props.nameValue && <p>{this.props.nameValue}</p>}
                {this.props.ageValue && <p>{this.props.ageValue}</p>}
            </div>
        );
    }
}
ReactDOM.render( < Form / > , document.getElementById('root'));

Answer 1

nameValue和ageValue都是组件状态的一部分，但不是props。

道具是您从父级到子级组件接收数据的东西。状态是您在组件中管理的东西。

所以改变

  {this.props.nameValue && <p>{this.props.nameValue}</p>}
        {this.props.ageValue && <p>{this.props.ageValue}</p>}

收件人

  {this.state.nameValue && <p>{this.state.nameValue}</p>}
        {this.state.ageValue && <p>{this.state.ageValue}</p>}

Answer 2

当您从状态而非道具获得价值时，需要将this.props.nameValue替换为this.state.nameValue。

状态未从NaN更新

2 个答案: