Почему не выводится значение из input при клике по кнопке (React, Hooks)?

Question

Здесь в коде

export default function InputComponent(props) {
  const [newLink, setNewLink] = useState('');
    const handleClick = (e) => {
          //console.log('setNewLink');
          console.log(setNewLink(e.target.value));
          const insertValue = setNewLink(e.target.value);
          insertValue.innerHTML = "<p></p>";
        };
    return (
    <div>          
        <InputField value={newLink} onChange={(e) => setNewLink(e.target.value)}/>
        <ButtonsWrapper>
        <Btn text="Add +" background="#636663" type = "button" onClick={handleClick}></Btn>
          <Btn text = "Generate" background="#48ED39" width = "180px"></Btn>
        </ButtonsWrapper>
        <React.Fragment>
    {/*{insertValue}*/}
        </React.Fragment>        
    </div>
  );
}

В итоге - не выводится даже в консоль значение из инпута

console.log(setNewLink(e.target.value));

Как должно работать:
значение которое получаем из инпута

<InputField value={newLink} onChange={(e) => setNewLink(e.target.value)}/>

при клике по кнопке <Btn text="Add +" должно выводиться здесь

 <React.Fragment>
       {insertValue}
    </React.Fragment>

Answer 1

При клике по кнопке e.target - это сама кнопка, никакого value у неё нет.

Answer 2

newLink - текущее состояние, setNewLink - функция, которое обновляет это состояние

const [newLink, setNewLink] = useState('');

Поэтому не очень понятно, что вы пытаетесь здесь сделать:

const insertValue = setNewLink(e.target.value);
insertValue.innerHTML = "<p></p>";

В методе onChange={(e) => setNewLink(e.target.value)} вы уже обновляете значение newLink. Поэтому при нажатии на кнопку вам будет достаточно просто отобразить это значение на экране.

Быстрое решение. Можно добавить переменную, которая будет отвечать за отображение/нет сообщения на экране.

const [newLink, setNewLink] = useState('');
const [isDisplayed, setDisplay] = useState(false); // сперва ничего не отображаем - false

Тогда при клике на кнопку, мы просто меняем значение новой переменной

const handleClick = () => {
  setDisplay(!isDisplayed); // меняем значение на противоположное
};

И при рендеринге смотрим значение, в случае чего - выводим на экран

 <React.Fragment>
   {isDisplayed ? newLink : ''}
 </React.Fragment>

БЛОГ НА HUSL

Почему не выводится значение из input при клике по кнопке (React, Hooks)?

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