Почему Input работает без состояния?

Question

Почему в этот инпут можно вводить текст без использования state?

// ? src/components/UI/MyInput.jsx
import React from "react";

export default function MyInput(props) {
    return (
        <input { ...props } />
    );
}

// ? src/App.jsx
import React, { useState } from "react";
import MyInput from "./components/UI/MyInput.jsx";

export default function App () {
    return (
        <div className="App">
            <MyInput />
        </div>
    );
}

Answer 1

Потому что так работает стандартный input. Для того, что бы input использовать совместно со state, вам нужно самому СВЯЗАТЬ state и input. Привожу три примера: 1) Простое изменение value. 2) Изменение value + доп параметры. 3) тоже самое, только input подключен как компонент

Подробнее в Документации

const { useState } = React;

function MyInput(props) {
  return (
    <input {...props} />
  );
}

function App(props) {
  const [inpVal, setInpVal] = useState('');
  const [inpValParams, setInpValParams] = useState('');
  const [inpValChild, setInpValChild] = useState('');


  const handleChange = (event) => {
    setInpVal(event.target.value);
  }


  const handleChangeParams = (event, params) => {
    console.log('params', params)
    setInpValParams(event.target.value);
  }

  const handleChangeChild = (event) => {
    setInpValChild(event.target.value);
  }

  return (
    <div>
      <label>
        Name:
        <input type="text" value={inpVal} onChange={handleChange}/>
      </label>
      
      <br />
      <br />

      <label>
        Nast name:
        <input type="text" value={inpValParams} onChange={(e) => handleChangeParams(e, 'params')}/>
      </label>
      
      <br />
      <br />


      <label>
        Password
        <input {...props} type="password" value={inpValChild} onChange={(e) => handleChangeChild(e)}/>
      </label>

    </div>

  );
}


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

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

<div id="root"></div>

БЛОГ НА HUSL

Почему Input работает без состояния?

Ответы (1 шт):