web-dev-qa-db-fra.com

Utilisation de Dynamic Var avec l'état `Set` dans React Hooks?

C'est un modèle assez courant dans les composants React:

handleTextFieldChange(event)
{
    const name = event.currentTarget.name;
    this.setState({[name]: event.currentTarget.value})
}

Quelle syntaxe Javascript pourrait être utilisée pour faire de même avec React hooks?

c'est-à-dire quelque chose pouvant aller dans le sens de:

handleTextFieldChange(event)
{
    const name = event.currentTarget.name;
    this.set[name](event.currentTarget.value);
}
javascriptreactjsreact-hooks
8
VikR

Que diriez-vous quelque chose comme ça?

function handleTextFieldChange(mySetFunction, event) {
    const value = event.currentTarget.value;
    mySetFunction(value);
}

<TextField
    placeholder="Email"
    name="passwordResetEmailAddress"
    onChange={(e) => handleTextFieldChange(setPasswordResetEmailAddress, e)}
>
    {passwordResetEmailAddress}
</TextField>

Je l'ai testé et ça marche.

8
VikR

Vous pouvez utiliser un seul useState avec une valeur par défaut d'un objet qui contient toutes vos valeurs d'entrée et mettre à jour ce que vous êtes habitué aux composants de classe.

Exemple

const { useState } = React;

function App() {
  const [state, setState] = useState({ email: "", password: "" });
  function onChange(event) {
    const { name, value } = event.target;
    setState(prevState => ({ ...prevState, [name]: value }));
  }

  return (
    <div>
      <input value={state.email} name="email" onChange={onChange} />
      <input value={state.password} name="password" onChange={onChange} />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>
15
Tholle
class Yup extends React.Component {
  state = {
    first: "",
    second: ""
  };

  handleTextFieldChange = ({ target: { name, value } }) =>
    this.setState({ [name]: value });

  render() {
    const { first, second } = this.state;
    return (
      <div>
        <p>{first}</p>
        <p>{second}</p>
        <input type="text" name="first" onChange={this.handleTextFieldChange} />
        <input
          type="text"
          name="second"
          onChange={this.handleTextFieldChange}
        />
      </div>
    );
  }
}

idem avec crochet

function Yup() {
  const [{ first, second }, setState] = useState({ first: "", second: "" });

  function handleTextFieldChange({ target: { name, value } }) {
    setState(prevState => ({ ...prevState, [name]: value }));
  }

  return (
    <div>
      <p>{first}</p>
      <p>{second}</p>
      <input type="text" name="first" onChange={handleTextFieldChange} />
      <input type="text" name="second" onChange={handleTextFieldChange} />
    </div>
  );
}
1
Bonjov