Question

这是我的两个组成部分。我只需要在登录组件中更新我的状态。我不确定我在这里做错了什么。我正在尝试将有关更改的数据传递给登录组件。对于每个字符，数据都会在e.target.value中捕获，但随后会重置状态。

我也试图将userObj移到状态中，但是不起作用

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

    class NonLoggenInForm extends Component {
        render() {

            return (
                <div className="marginTop1 formPanel">
                    <FormHeader label={this.props.label}/>
                        {this.props.content.map((key)=>{
                            return <input type={key.type} 
                                         value = {key.value} 
                                         placeholder = {key.name}
                                         required = {key.required}
                                         onChange = {e=>this.props.onChange(e)}
                                         className = "formInput"
                                         name = {key.name}
                                         key = {key.id}
                                         />;
                                        })}

                        <button  onClick={this.props.onSubmit}> Sign in</button> 

                </div>

            );

        }

      }

      export default NonLoggenInForm;


import React, { Component } from 'react';
import Logo from '../shared/Logo';
import NonLoggenInForm from '../shared/NonLoggenInForm';

class Login extends Component {

    changeHandler = (e) => {
        console.log(e.target.value);
        this.setState({
            [e.target.name] : e.target.value
        });
    }
    loginHandler = (e) => {
        e.preventDefault();
        console.log(this.state);
    }

    render() {
       let  userObj = [
            {
                name : 'userId',
                type: 'text',
                required: true,
                value : '',
                id : 1

            },
            {
                name : 'password',
                type : 'password',
                required : true,
                value : '',
                id : 2

            }
        ];
    return (
            <div className="nonLoggedInPages">
                <Logo/>
                <NonLoggenInForm content={userObj} label="Sign in" onSubmit={this.loginHandler} onChange={this.changeHandler}/>
            </div>

        );

    }

  }

  export default Login;

Answer 1

再次将用户Obj移至状态并更改onChange函数，如下所示

changeHandler = (e) => {
    let objIndex = this.state.userObj.findIndex((ele)=>{
        return ele.name === e.target.name;
    });
    let upadtedObject = [...this.state.userObj];
    upadtedObject[objIndex].value = e.target.value;
    this.setState({
        userObj : upadtedObject
    });
    e.target.value = this.state.userObj[objIndex].value;
}

React无法设置双向绑定

1 个答案: