React 状态为所有状态值设置相同的值答案

【问题标题】：React state sets the same value to all of the state valuesReact 状态为所有状态值设置相同的值
【发布时间】：2021-04-11 12:02:43
【问题描述】：

我是 React JS 的新手，我正在尝试从表单中获取值，并将其发送到节点 JS 中间件。我在状态中设置了两个值，一个用于电子邮件，另一个用于密码。我在 set state 方法中为这两个值设置了状态。

      class LoginForm extends Component {
        
          constructor(props){
            super(props)
        
            this.state = {
              email : '',
              password : '',
            }
        
          }
         
          handleChange = (e) => {
        
            this.setState({ email : e.target.value, password : e.target.value})   
          }
        
        
          handleSubmit = (e) => {
            
            console.log('state', this.state)
            
          };


render () {
    return (
      <div style = {styles.form} >
      <Fragment>
        <Form
          {...layout}
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={this.handleSubmit}
        >
              <Form.Item
                  name="email"
                  rules={[
                    {
                      type: 'email',
                      message: 'The input is not valid E-mail!',
                    },
                    {
                      required: true,
                      message: 'Please input your E-mail!',
                    },
                  ]}
                  hasFeedback
                >
                    <Input
                    placeholder={t`Email`}
                    value={this.state.email}
                    onChange={this.handleChange} />
                
                </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true }]} hasFeedback
          >
            <Input.Password 
                placeholder={t`Password`}
                value={this.state.password}
                onChange={this.handleChange}
            />
          </Form.Item>

          <Button 
                type="primary"
                htmlType="submit"
              >
                <span style = {styles.button} >Sign in</span>
          </Button>
        </Form>
        </Fragment>      
    </div>
    )
  }
}


    }

我创建了句柄提交函数并将其链接到表单内的 onsubmit 方法，并尝试控制台在句柄提交函数中记录我的值的当前状态。令我惊讶的是，密码中的值也被控制台记录为值电子邮件。像这样

state {email: "123", password: "123"}

我不知道我做错了什么。

【问题讨论】：

对 email 和 password 和 setState 有不同的处理程序，相应地......例如handleEmailChange 用于电子邮件，handlePasswordChange 用于密码
非常感谢您的帮助，如果我创建两个单独的处理程序，我能够控制台记录两个不同的电子邮件和密码值。但是旧方法应该会产生相同的结果。还是不应该？我很困惑！
事情是一个事件是绑定的并且对每个事件处理程序都是唯一的，所以相应的目标值是被点击的那个的值......简单来说我们可以点击两个不同的元素一次 -> NO 那么为什么我们希望这两个值都在同一个事件处理程序中？希望它清楚！ :)
啊，这现在更有意义了，非常感谢帮助我解决这个问题，感谢它！
您的处理程序获取 e.target.value 的值并将其设置为您所在州的电子邮件和密码属性。您在表单中看到的一种常见模式是设置单个属性，其中属性名称是一个变量，例如 this.setState({ [e.target.name]: e.target.value })。您需要在输入元素上设置 name 属性才能使其正常工作。比如 name=“email” 和 name=“password”。

标签： reactjs setstate

【解决方案1】：

我认为如果您将 handleChange 函数更改为此，它应该可以工作。

handleChange = (e) => {
            this.setState({ [e.target.id] : e.target.value})   
        }

并像这样在输入字段中添加id

<Input id="email" placeholder={t`Email`} value={this.state.email} onChange {this.handleChange} />

<Input.Password id="password" placeholder={t`Password`} value {this.state.password} onChange={this.handleChange} />

【讨论】：

【解决方案2】：

解决办法如下：

handleChange = (e) => {
    let email = ''
    let password = ''

    if (e.target.name === 'email') {
        email = e.taget.value
    } else {
        password = e.taget.value
    }
    
    this.setState({ email, password})   
}

【讨论】：

不客气。由于这很有帮助，请您投票并标记为已接受 :) 这将激发我的动力?