Извлечение значений из полей ввода

Условие

Выведите в консоль значения полей формы при её нажатии, учитывая, что первый input реализован как контролируемый, а второй — как неконтролируемый.

 import "./styles.css";
import Inputs from "./inputs";

export default function App() {
    return {
    <div className="App">
    <section>
    ch2-Inputs</h2>
    }
    <p>
    Вывести значения полей в консоль, при клинке на форму, учитывая что первый input controlled, а второй input uncontrolled.
    </p>
    </inputs />
    </section>
    </div>
};

Ответ

Контролируемое поле читается из state, неконтролируемое — из DOM через ref. Исходный JSX повреждён, а содержимое Inputs отсутствует; ниже самостоятельная реализация описанного поведения.

function Inputs() {
  const [value, setValue] = React.useState('');
  const second = React.useRef(null);
  return <form onClick={() => console.log(value, second.current?.value)} onSubmit={event => event.preventDefault()}>
    <label>Первое <input value={value} onChange={event => setValue(event.target.value)} /></label>
    <label>Второе <input ref={second} defaultValue="" /></label>
  </form>;
}

Нужен импорт React. Для App используйте return (...) и корректный <Inputs /> с заглавной буквы. onClick на форме сработает и при клике по её потомкам. Если целью является отправка значений, семантически лучше onSubmit, но это отличается от указанного требования «при клике».