Использование Dynamic Var с `Set` State в React Hooks? - PullRequest
Новая
       7

Использование Dynamic Var с `Set` State в React Hooks?

0 голосов
/ 14 февраля 2019

Это довольно распространенный шаблон в компонентах React: 

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

Какой синтаксис Javascript можно использовать, чтобы сделать то же самое с перехватчиками React?

, то есть что-то вроде следующего:

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

Ответы [ 3 ]

0 голосов
/ 14 февраля 2019 
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>
    );
  }
}

то же самое с крючком 

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>
  );
}
0 голосов
/ 15 февраля 2019

Как насчет чего-то подобного? 

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

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

Я проверил это, и оно работает.

0 голосов
/ 14 февраля 2019

Вы можете использовать один useState со значением по умолчанию для объекта, который содержит все ваши входные значения, и обновить, как вы привыкли, с компонентами класса.

Пример 

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>
...