Question

    import React, { Component } from 'react';
    //import NameInput from './NameInput';

    class NameInput extends React.Component {
        constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
        }
        handleChange(event) {
            this.props.onNameChange(event.target.value);
        }

        render() {
            const name = this.props.name;
            return(
                <input type="text" value={name} onChange={this.handleChange} />
            );
        }

    }







    class NameForm extends React.Component {
        constructor(props) {
        super(props);
        this.state = {name: ''};

破损代码的开始。出于某些原因，该代码将无法使用。应该将输入的状态从子组件NameInput提升到父组件NameForm。因此，一旦用户按下“提交”，用户在输入框中输入的值便会出现在书面消息中。

        this.nameChange = this.nameChange.bind(this);

已损坏代码的第一部分结尾。 nameChange连接到NameInput组件中的函数。由于某种原因，它会以未定义的形式出现，并且不会发生setState更改事件。

            this.handleSubmit = this.handleSubmit.bind(this);
        }

破损代码的开始。为什么这部分不起作用？为什么会出现未定义的情况？这是发生错误的确切位置。 nameChange将无法正常工作，并且name属性将无法评估或状态由于某种原因而不会更新。

            nameChange(event) {
                        this.setState({name: event.target.value});
                        }

代码损坏的结尾。这是断码的结尾。这是代码无法正常工作的区域。我不知道为什么它不起作用以及为什么此变更处理程序中的setState无法起作用。您能帮我弄清楚并解决问题吗？

handleSubmit(event) {
        alert('A name was submitted: ' + this.state.name);
        event.preventDefault();
        }

        render() {
            const name = this.state.name;
            return (
                <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <NameInput  name={name} onNameChange={this.nameChange}/>
                </label>
                <input type="submit" value="Submit" />
                </form>
            );
        }
    }
    export default NameForm;

Answer 1

如果您仍未解决问题，则根据Garrett的评论，这是一种视觉表示，可能会有所帮助。

nameChange（ event ）{this.setState（{name：event.target.value}）; }

handleChange（event）{this.props.onNameChange（ event.target.value ）;   }

正如他所说，您的nameChange方法期望接收一个事件对象。但是，您没有将事件对象传递给它。相反，您已经为它传递了值。

为什么不设置状态渲染？说无法呈现未定义的属性值

1 个答案: