Question

你好吗？我来这里寻求您的帮助。我在React JS上，我要求通过邮寄发送这些状态以生成用户。-

class NuevoUsuario extends Component{
    constructor(props){
        super(props)
        this.state = {
            usuario: '',
            password: '',
            persona: {
                apellido:'',
                apellidoCasada:'',
                nombre:'',
                dni:'',
                telefono:'',
                celular:'',
                email:'',
                ubicacion: {
                    direccion:'',
                    ciudad:'',
                    provincia:'',
                    codigoPostal:'',
                    paisId: 0,
                }

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

    handleInput(e){
        this.setState({[e.target.name]: e.target.value })
        console.log(this.state);
    }

现在我想要的是

 <div className="form-group">
                  <label htmlFor="exampleInput">Apellido</label>
                    <input
                      className="form-control input-lg"
                      type="text"
                      name="apellido"                                     
                      onChange={this.handleInput}                      
                    />
                  </div>

这样做时，会分配用户名和密码，但不会将姓氏和所有其他名称分配给person.lastname或person.name，还会添加新的状态，而person的状态为空{}

enter image description here

我要保留在person.surname中。如果您能帮助我，我将不胜感激

Answer 1

首先，在React中，您需要在状态字段和输入字段之间进行双向绑定。您可以通过在输入中添加一个价值道具来做到这一点，如下所示：

<input
    className="form-control input-lg"
    type="text"
    name="apellido"   
    value={ this.state.persona.apellido }     <----- Two Way                            
    onChange={this.handlePersonaInput}        <----- Binding              
/>

第二，您的用户名和密码字段起作用，因为您的handleInput方法只能在该州的第一深度级别中找到它们的值。您的Persona变量位于状态深度的第二级，而您的地址信息位于状态深度的第三级。为了达到Persona值，您需要设置第二个输入处理程序：

    handlePersonaInput(e){
        this.setState({persona[e.target.name]: e.target.value })
    }

，并且您的角色地址字段将具有第三个输入处理程序：

    handleAddressInput(e){
        this.setState({persona.ubicacion[e.target.name]: e.target.value })
    }

如果您对组件中的3个输入处理程序不满意，可以将它们合并为一个，如下所示：

    handleInput(e){
        const { name, value } = e.target;

        if (name === 'usuario' || name === 'password')
           this.setState({[name]: value });

        else if (name === 'apellido' || name === 'apellidoCasada' || etc..)
           this.setState({persona[name]: value });

        else if (name === 'direccion' || etc..)
           this.setState({persona.ubicacion[name]: value });
    }

当您想要修改其状态变量之一时，请记住要考虑一下状态结构。

Answer 2

您的input标记具有属性name，可用于在state中选择要更新的属性

<input
    className="form-control input-lg"
    type="text"
    name="apellido"                                     
    onChange={this.handleInput}                      
/>

然后handleInput使用e.target.name指定要更新的属性

handleInput(e){
    this.setState({[e.target.name]: e.target.value })
    console.log(this.state);
}

e.target.name将等于apellido，因此this.state.apellido将等于输入值。

设置name=persona.apellido不会解决您的任务。您将无法访问this.state.persona.apellido。

我看到的最简单的解决方案是使state一个平面对象没有嵌套的对象。像这样

this.state = {
    usuario: '',
    password: '',
    apellido:'',
    apellidoCasada:'',
    nombre:'',
    dni:'',
    // And so on
}

另一种解决方案是像这样（未经测试！）在this.target.name中解析handleInput

handleInput(e){
    let name = e.target.name.split('.');
    switch (name.length)
        case 1:
            this.setState({[e.target.name]: e.target.value });
            break;
        case 2:
            this.setState({[name[0]]: {...this.state[name[0]], [name[1]]: e.target.value }});
            break;
        case 3:
            this.setState({[name[0]]: {...this.state[name[0]], [name[1]]: { ...this.state[name[0]][name[1]], [name[2]]: e.target.value }}});
            break;
        default:;
    }
    console.log(this.state);
}

但是我不推荐第二种解决方案，因为它过于复杂并且将来很难维护。

React Js数据处理

2 个答案: