Как передать функцию initialInput из useEffect() в тег input?
Получаю актуальный id input только в useEffect, мне нужно передать индекс в функцию initialInput для изменений значений в input. Как это сделать?
import React, {useEffect, useState} from 'react';
const AnonPage = () => {
const [answers, setAnswers] = useState(['1', '2', '3'])
const [editAnswer, setEditAnswer] = useState(null)
function changeElement(event) {
setAnswers(
[
...answers.slice(0, editAnswer),
event.target.value,
...answers.slice(editAnswer + 1)
]
)
}
useEffect(() => {
console.log('ID инпута:', editAnswer)
function initialInput(index) {
setEditAnswer(index)
if (editAnswer)
return answers[editAnswer]
return answers[0]
}
}, [editAnswer])
function result() {
console.log(answers)
}
return (
<div style={{display: 'flex', flexDirection: "column"}}>
{
answers.map((answer, index) =>
<input key={index}
value={answer}
onChange={changeElement}
onClick={() => initialInput(index)}
type="text" />
)
}
<button onClick={result}>Результат</button>
</div>
);
};
export default AnonPage;
Пытался сделать через return достать функцию, но у меня не получилось.
Ответы (1 шт):
Автор решения: Алексей
→ Ссылка
Вам необходимо объявить функцию initialInput на уровне компонента.
const AnonPage = () => {
const [answers, setAnswers] = useState(['1', '2', '3'])
const [editAnswer, setEditAnswer] = useState(null)
function changeElement(event) {
setAnswers(
[
...answers.slice(0, editAnswer),
event.target.value,
...answers.slice(editAnswer + 1)
]
)
}
function initialInput(index) {
setEditAnswer(index)
if (editAnswer)
answers[editAnswer]
}
return (
<div style={{display: 'flex', flexDirection: "column"}}>
{
answers.map((answer, index) =>
<input key={index}
value={answer}
onChange={changeElement}
onClick={() => initialInput(index)}
type="text" />
)
}
<button onClick={result}>Результат</button>
</div>
);
};