Question

我正在使用React接受来自用户的输入。当用户提交时，我想摆脱该表单并显示用户输入的数据。

我在结果页面上看不到用户输入的数据。我已经上传了以下屏幕截图和代码。

class Form extends React.Component {
    constructor(props){
        super(props)
        this.state = {isFormOn: true, isResult: false , firstname: "", lastname: ""};
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    handleClick(){
        this.setState(state => ({
            isFormOn: !state.isFormOn,
            isResult: !state.isResult
        }));
    }

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


    render(){
        return(
            <div>
                { this.state.isFormOn && (
                   <div>
                     First name :
                     <input type="text" name="firstname" onChange={this.handleChange}  /><br />
                     Last name :
                     <input type="text" name="lastname" onChange={this.handleChange}  /><br />
                     <br />
                     <button onClick={this.handleClick}>
                        {this.state.isFormOn ? 'ON' : 'OFF'}
                     </button>
                   </div>
                )}
                { this.state.isResult && (
                   <div>
                       <h4>The name entered is : {this.state.firstname} {this.state.lastname} </h4>
                       <button onClick={this.handleClick}>
                           {this.state.isFormOn ? 'ON' : 'OFF'}
                       </button>
                   </div>
                )}
            </div>
        );
    }
}

ReactDOM.render(
  <Form />,
  document.getElementById('root')
);

Render form to accept user input

Result of the user entered information

Answer 1

您的事件处理程序（handleChange）是destructuring事件对象，并尝试从中提取名为event的属性，该属性不存在。

您需要直接使用事件对象：

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

无法在React中更新表单数据

1 个答案: