Как создать компонент even from react hook в typescript?

#reactjs #typescript #react-hooks #eventemitter

#reactjs #машинописный текст #реагирующие крючки #eventemitter

Вопрос:

У меня есть такой компонент, как:

 <div>
<button onClick={add_input_list()}>add</botton>
<ul>
<li>
<input type="text" value={value} onChange={somefunction}/>
</li>
<li>
<input type="text" value= {value} onChange={somefunction}/>
</li>
</ul>
</div>
  

Я просто хочу сделать этот компонент дочерним компонентом, который может передавать это входное событие onChange вовне как событие onChange.

Но у компонента or нет события onChange. Как его добавить? Мне нужно, чтобы у компонента погружения было событие onChange emmit. если входные данные имеют событие onChange, а div будет выдавать событие onChange снаружи.

полный код похож на:

https://codesandbox.io/s/formik-codesandbox-template-forked-0hrdu?file=/index.js

Ответ №1:

Поскольку вы хотели получить список входных данных, вот обновленный код. Также обновлен пример Stackblitz :

 import React, { Component } from "react";
import { render } from "react-dom";

const App = () => {
  const handleChange = inputListState => {
    console.log("Input list state = ", inputListState);
  };
  return <MyInputList onChange={handleChange} />;
};

const MyInputList = ({ onChange }) => {
  const [state, setState] = React.useState();
  
  // When state changes, emit the value to the parent
  React.useEffect(() => {
    onChange(state);
  }, [state]);
  
  const editState = e => {
    setState({ ...state, [e.target.name]: e.target.value });
  }
  return (
    <ul>
      <li>
        <input name="input1" type="text" onChange={editState} />
      </li>
      <li>
        <input name="input2" type="text" onChange={editState} />
      </li>
      <li>
        <input name="input3" type="text" onChange={editState} />
      </li>
    </ul>
  );
};

render(<App />, document.getElementById("root"));
  

Вот воспроизведение в Stackblitz.

Вы просто передаете родительский метод в качестве prop дочернему компоненту и используете его в onChange случае ввода.

[редактировать]: для списка входных данных он работает так же, но вам просто нужно создать объект, содержащий разные состояния ввода, прежде чем выдавать свое значение.

Комментарии:

1. привет, на самом деле, мне нужен список входных данных, поэтому я хочу <ul onchange={onchange}><li><тип ввода=»текст»/></li></ul>, но у компонента ul нет события on change. @Квентин Гризель