Question

我是React js的新手。我创建了一个具有输入字段的应用程序，当您单击“提交”按钮时，输入字段的值将显示在console.log中，具体取决于在输入字段中输入的值。问题是我可以仅使用一种状态来显示在输入字段中输入的以下内容吗？

这是我的代码：

constructor () {
  super ();
  this.state = {
    username: '',
    password: '',
    place: '',
    birthPlace: '',
  }
}

username = () => {
  this.setState({ username: event.target.value })
}

password = () => {
  this.setState({ password: event.target.value })
}

place = () => {
  this.setState({ place: event.target.value })
}

birthPlace = () => {
  this.setState({ birthPlace: event.target.value })
}

我要发生的事情是仅对用户名，密码，位置，birthPlace（如果可能）使用一种状态，而我要发生的事情是单击提交按钮时输入的值字段应显示在console.log

仅出于优化目的。感谢您的帮助

Answer 1

为此使用钩子可能更好，例如下面的代码可以做到

    import React , {useState} from 'react'

    const myComp = () =>{

    const [userDetails, setUserDetails] = useState({})


    handleOnChange({target:{value, id}}) =>{
    let newState = Object.assign({}, userDetails, {[id]: value})
     setUserDetails(newState)
    }

 return (
<form>   
    <input type='text'  id='name' value={userDetails['name']} onChange={handleOnChange} />
    <input type='password'  id='password' value={userDetails['password']} onChange={handleOnChange} />
    <input type='email'  id='email' value={userDetails['email']} onChange={handleOnChange} />
</form>
)
}

Answer 2

You can use the dictionary objects.
Define your state like this

    constructor () {
        super ();
        this.state = {
            formvalues:{}
        }
    }

and you can update your values by defining any key you want.

   this.setState(prevState => ({
       formvalues: {
           ...prevState.formvalues,
            [username]: value
        }
    }))

and you can access any input field based on the key you defines.

`console.log(this.state.formvalues.username)`

Answer 3

constructor () {
  super ();
  this.state = {
    username: '',
    password: '',
    place: '',
    birthPlace: '',
  }
}

您可以对所有值使用一种方法，例如使用相同状态时

handleChange = event => {
    const { value, name } = event.target;

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

Answer 4

您可以尝试使用React hooks的示例：

function App() {
  const [state, setState] = React.useState({
    username: '',
    password: '',
    place: '',
    birthPlace: '',
  });
  
  function handleChange(event) {
    const { name, value } = event.target;
    console.log(name);
    console.log(value);
    setState(prevState => ({
      ...prevState,
      [name]: value
    }));  
  }
  
  function handleSubmit(event) {
    console.log(state);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>UserName</label>
      <input type="text" name="username" value={state.username} onChange={handleChange} /><br />
      <label>Password</label>
      <input type="password" name="password" value={state.password} onChange={handleChange} /><br />
      <label>Place</label>
      <input type="text" name="place" value={state.place} onChange={handleChange} /><br />
      <label>BirthPlace</label>
      <input type="text" name="birthPlace" value={state.birthPlace} onChange={handleChange} /><br />
      <input type="submit" value="Submit" />
    </form>
  );
}

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

.as-console-wrapper {
  height: 80px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

更多信息：https://reactjs.org/docs/forms.html

Answer 5

请注意，直接用event.target.value设置状态并不会总是产生预期的结果。

React使用Synthetic event wrapper，并且能够直接使用event.target.value更新状态，它使用persist()来使事件持续足够长的时间以便在{{1}中使用}方法。

我建议在类组件中使用setState()的目的是存储值，然后更新状态。

所以不要这样做：

event.target.value

您这样做：

username = (event) => {
  this.setState({ username: event.target.value })
}

通过这种方式，事件触发后很长时间就可以保留该值。

您会注意到，在上面的示例中，我添加了username = (event) => { const value = event.target.value; this.setState({ username: value }) }作为参数。这是为了回答有关如何更新状态的问题的第二部分。每次更改键入的用户名时，您需要不断调用用户名方法。您可以通过event侦听器来调用它：

onChange

React js-仅使用一种状态而不是多个状态来处理“ event.target.value”

5 个答案: