#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. @Квентин Гризель