reactjs - 如何将选择器的值转换为空字符串？

Question

我有一个选择器，我可以在其中获取一个人的出生月份、年份和日期，以便在平台上注册他/她。我试图实现一个循环来获取选择器的文本内容。调试后，我意识到无论我放什么，例如月份总是被最后一个值替换。例如，如果我选择 3 月，无论如何它都会将 monthOfBirth 更改为 12 月。

import React, {useState} from 'react'
import './signup.css'
import axios from 'axios'

function Signup() {
  const [useEmail, setUseEmail] = useState(true)
  const [username, setUsername] = useState('')
  const [email, setEmail] = useState('')
  const [phone, setPhone] = useState('')
  const [password, setPassword] = useState('')
  const [monthOfBirth, setMonthOfBirth] = useState('')

  const toggleEmail = () => {
    if(useEmail) {
      setUseEmail(false)
    } else {
      setUseEmail(true)
    }
  }

  const onChangeUsername = (e) => {
    setUsername(e.target.value)
  }

  const successAlert = () => {
    alert("successful")
  }

const onChangeEmail = (e) => {
  if(useEmail) {
    setEmail(e.target.value)
  } else {
    setPhone(e.target.value)
  }
}

const onPasswordChange = (e) => {
  setPassword(e.target.value)
}

const onSubmit = (e) => {
  e.preventDefault()

  const users = {
    username: username,
    email: email,
    phone: phone,
    password: password,
  }
  axios.post('http://localhost:5000/users/add', users)
  .then(res => console.log(res.data))
}

const getValues = (e) => {
  for (var i = 0; i < e.target.length; i++) {
      setMonthOfBirth(e.target[i].textContent)
      console.log(monthOfBirth)
  }
}

  const getYears=(start,end)=>{
    let _years=[]
    for(let i=start;i<=end;i++){
      _years.push(i)
    }
    return _years
  }

  let years = getYears(1901,2021)


    return (
        <div className="modalsignup">
          <div className="modal____popupform">
          <img  src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png" className="twitterLogo____signup" />
          <form onSubmit={onSubmit}>
          <h1 className="signup_____headertext">Create your account</h1>
          <input placeholder="Name" onChange={onChangeUsername} className="placeholder____divcreateaccount"/>
          {useEmail ? <input placeholder="Email" onChange={onChangeEmail} className="placeholder____divcreateaccount" />: <input placeholder="Phone" onChange={onChangeEmail} className="placeholder____divcreateaccount"/>}
          <div>
            <button className="switcher_____button" onClick={toggleEmail}>Use {useEmail ? "phone" : "email"} instead</button>
          </div>
            <input placeholder="Password" onChange={onPasswordChange} className="placeholder____divcreateaccount" type="password"/>
          <div>
            <h4 className="birthdate____signup">Date of birth</h4>
            <p className="birthdate______paragraph">This will not be shown publicly. Confirm your own age, even if this account is for a business, a pet, or something else.</p>
          </div>
          <div className="selector_____options">
            <div>
              <select onClick={getValues} className="selector_____months">
                    <option value="0">Month</option>
                    <option value="1">January</option>
                    <option value="2">February</option>
                    <option value="3">March</option>
                    <option value="4">April</option>
                    <option value="5">May</option>
                    <option value="6">June</option>
                    <option value="7">July</option>
                    <option value="8">August</option>
                    <option value="9">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                  </select>
                </div>
                <div>
                  <select className="selector_______days">
                        <option value="0">Day</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                      </select>
                    </div>
                    <div>
                      <select className="selector______year">
                      <option>Year</option>
                      {years.map(get => {
                              return  <option value={get} key={get}>{get}</option>
                       })}
                      </select>
                    </div>
          </div>

          <div>
            <button className="signup_____button" onClick={successAlert}>Next</button>
          </div>
            </form>
          </div>
        </div>
    )
}

export default Signup

标签： reactjs

Answer 1

您的代码中有一些问题：

1. 您应该onClick将选择选项更改为onChange.
2. 在方法中使用console.log(monthOfBirth)after不会给出正确的状态，因为从钩子创建的 which 是异步方法。当它运行时，您无法在控制台中看到实际的新状态。为了在您需要回调函数后获得正确的状态。setMonthOfBirth(label)getValuessetMonthOfBirthuseStatesetMonthOfBirth
3. 循环e.target.length获取所选值是不正确的。

您可以更改getValues为波纹管以获得正确的结果：

  const getValues = (e) => {
    let index = e.nativeEvent.target.selectedIndex;
    let label = e.nativeEvent.target[index].text;// getting text of the month for example : December,November...
    let value = e.target.value;// getting value of the month : 11,12,...
    setMonthOfBirth(label);
  }; 

还将更改select为：

 <select onChange={getValues} className="selector_____months">

为了查看正确的状态，您可以使用use-state-with-callback和定义您的状态，如下所示：

  const [monthOfBirth, setMonthOfBirth] = useStateWithCallback("", () => {
    console.log(monthOfBirth);
  });