我可以使用React中的useForm获得onChange每个输入值的长度吗

Question

我想要这个。当我点击ADD HEADLINE按钮时创建输入行。当我取消按钮时删除输入行。"创建"按钮可以，但"取消"按钮不起作用。然后，我想在每次输入时显示onChange文本计数。为什么这个代码不起作用。。。？请帮帮我。

我想要这个。当我点击ADD HEADLINE按钮时创建输入行。当我取消按钮时删除输入行。"创建"按钮可以，但"取消"按钮不起作用。然后，我想在每次输入时显示onChange文本计数。为什么这个代码不起作用。。。？请帮帮我。

import React, { useState, useRef } from 'react';
import styled from 'styled-components';
import InputX from '../../../../../../assets/icons/InputX.svg';
function Headlines({ register }) {
const [headerLineCount, setHeaderLineCount] = useState([
{ id: 1, inputValue: '' },
]);
const [changeValue, setChangeValue] = useState();
const countRef = useRef(1);
const addInput = () => {
countRef.current += 1;
setHeaderLineCount(
headerLineCount.concat({ id: countRef.current, inputValue: changeValue })
);
};
const onRemove = () => {
setHeaderLineCount(
headerLineCount.filter(data => data.id !== headerLineCount.id)
);
};
return (
<Container>
<List>
<LabelBox>
<HeadlineLabel htmlFor="headlines">Headlines</HeadlineLabel>
<Count>{headerLineCount.length}/15</Count>
</LabelBox>
{headerLineCount.map(count => (
<InputWrap key={count.id}>
<InputBox>
<Input
ref={countRef}
placeholder="New headline"
maxLength="30"
{...register(`headlines${count.id}`, {
required: true,
maxLength: 30,
})}
onChange={e => setChangeValue(e.target.value.length)}
/>
<XIcon src={InputX} onClick={onRemove} value={count.id} />
</InputBox>
<TextIndicater>{changeValue}/30</TextIndicater>
</InputWrap>
))}
</List>
<AddHeadLine onClick={addInput} disabled={!(headerLineCount.length < 15)}>
ADD HEADLINE
</AddHeadLine>
</Container>
);
}
export default Headlines;

Answer 1

您需要onRemove来接受要删除的id，并替换headerLineCount.filter(data => data.id !== headerLineCount.id)。

import React, { useState, useRef } from 'react';
import styled from 'styled-components';
import InputX from '../../../../../../assets/icons/InputX.svg';
function Headlines({ register }) {
const [headerLineCount, setHeaderLineCount] = useState([
{ id: 1, inputValue: '' },
]);
const [changeValue, setChangeValue] = useState();
const countRef = useRef(1);
const addInput = () => {
countRef.current += 1;
setHeaderLineCount(
headerLineCount.concat({ id: countRef.current, inputValue: changeValue })
);
};
// added an argument here
const onRemove = (id) => {
setHeaderLineCount(
// Changed this to verify against the argument
headerLineCount.filter(data => data.id !== id)
);
};
return (
<Container>
<List>
<LabelBox>
<HeadlineLabel htmlFor="headlines">Headlines</HeadlineLabel>
<Count>{headerLineCount.length}/15</Count>
</LabelBox>
{headerLineCount.map(count => (
<InputWrap key={count.id}>
<InputBox>
<Input
ref={countRef}
placeholder="New headline"
maxLength="30"
{...register(`headlines${count.id}`, {
required: true,
maxLength: 30,
})}
onChange={e => setChangeValue(e.target.value.length)}
/>
{/* Changed this to pass the id of the currently being processed count */}
<XIcon src={InputX} onClick={() => { onRemove(count.id) }} value={count.id} />
</InputBox>
<TextIndicater>{changeValue}/30</TextIndicater>
</InputWrap>
))}
</List>
<AddHeadLine onClick={addInput} disabled={!(headerLineCount.length < 15)}>
ADD HEADLINE
</AddHeadLine>
</Container>
);
}
export default Headlines;