Входное значение, полученное в реквизитах, не изменяется

#javascript #html #reactjs #react-props

#javascript #HTML #reactjs #реагировать-props

Вопрос:

Существует форма ввода:

 <input type="number" value={propsValue} onChange={changeValue} />

propsValue получено в компоненте через props. Как changeValue должна выглядеть функция, чтобы иметь возможность изменять значение в форме ввода?

1. Вы используете функциональный компонент или компонент класса?

2. @JamesHamann функциональный компонент

3. вы можете обратиться к этому dmitripavlutin.com/react-forms-tutorial/#2-form-state . но в вашем случае установите значение propsValue в качестве значения состояния по умолчанию

Ответ №1:

Редактировать: понял, что я скопировал вставленный жесткий путь импорта кодов для служебной функции. Просто замените путь к вашей служебной функции.

Для функциональных компонентов может быть полезно использовать вспомогательную служебную функцию для сопоставления ваших входных данных с состоянием. Это настройка, которую я использую (она довольно простая). У меня есть useForm.js файл, который экспортирует useForm функцию:

 import { useState } from 'react';

export default function useForm(defaults) {
  const [values, setValues] = useState(defaults);

  function updateValue(e) {
    if (e.target.type === 'number') {
      e.target.value = parseInt(e.target.value);
    }
    setValues({ ...values, [e.target.name]: e.target.value });
  }

  return { values, updateValue };
}

Затем, когда я хочу использовать форму a, я могу сделать это:

 import useForm from '../utils/useForm';

export default function MyComponent(props) {
  const { values, updateValue } = useForm({
    name: props.inputValue1,
    email: props.inputValue2
  });

  return (
    <form>
      <label htmlFor="name">
          Name
          <input
            type="text"
            name="name"
            id="name"
            value={values.name}
            onChange={updateValue}
          />
        </label>
        <label htmlFor="email">
          Email
          <input
            type="email"
            name="email"
            id="email"
            value={values.email}
            onChange={updateValue}
          />
        </label>
    </form>
  )
}

Итак, вы видите, что я использую вспомогательную функцию для привязки входных данных к состоянию компонента. Вам нужно убедиться, что ваши входные имена соответствуют свойствам names, которые вы передаете при вызове useForm в вашем компонентном файле.

Кстати, спасибо Уэсу Босу за эту функцию помощи.

1. Я не понимаю, где находятся реквизиты, полученные в компоненте

2. Извините, вы правы, я пропустил эту часть. Поэтому, если вы передаете props своему компоненту, используйте значение props при вызове useForm . Я обновлю свой ответ

3. Просто измените свой код, чтобы использовать любые значения prop, с которых вы хотите начать ввод, и используйте значение по умолчанию для любого ввода, который не передается как prop

Ответ №2:

Что-то вроде этого.

 // hooks
const {useState} = React;

function Input(props){
 return <input type="number" value={props.value} onChange={() => props.onChange(event)} /> 
};


function App(){
  const [value, setValue] = useState('');
  function onChange(event){
    setValue(event.target.value)
  }
  return (
    <div>
      <p>Value: {value}</p>
      <Input value={value} onChange={onChange}/>
    </div>
  );
};

// Render
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

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

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

Развернуть фрагмент кода