因此,我试图在每次单击按钮时渲染组件。例如,每次单击按钮都会显示文本,或者每次单击按钮都会显示新的输入框。在下面的代码中,我只是试图在每次单击按钮时在UI中显示文本。我一直在跟踪其他没有运气的堆栈溢出帖子。我想念什么吗?
export default function InputData() {
const categories = useSelector(state => state.data.retailCategoriesSelected);
function addition(event, category) {
categories['retail'].push({value: category, label: category});
return(
<div>
<p>hey</p>
</div>
)
console.log(categories);
}
const dataForms = categoriesSelected ? (
categories['retail'].map((d, idx) => {
return (
<div key={idx}>
{idx === 0 && (
<h2 className="text-center mb-3" id="header">
Input Data For Selected Categories
</h2>
)}
<div key={idx} className="input-data-select-container mb-4">
<Row>
<Col xs="8">
<h3 className="font-weight-light">{d.value}</h3>
</Col>
<Col xs="4">
<Button
onClick={(e) => addition(e, d.value)}
>
Add
</Button>
</Col>
</Row>
<Row>
<Col xs="4">
<Label>Recommended Size:</Label>
<Input
type="number"
min="0"
placeholder="0"
name="recommendedSize"
onChange={(e) => handleInputChange(e, d.value)}
/>
</Col>
<Col xs="4">
<Label>
First-Year {new Date().getFullYear()} Sales Per Sq Ft:
</Label>
<Input
type="number"
min="0"
placeholder="0"
name="firstYearSalesPerSqFt"
onChange={(e) => handleInputChange(e, d.value)}
/>
</Col>
<Col xs="4">
<Label>
Fifth-Year {new Date().getFullYear() + 5} Sales Per Sq Ft:
</Label>
<Input
type="number"
min="0"
placeholder="0"
name="fifthYearSalesPerSqFt"
onChange={(e) => handleInputChange(e, d.value)}
/>
</Col>
</Row>
<FormGroup className="mt-2">
<Label>Select Recommended Vendors:</Label>
<Select
closeMenuOnSelect={false}
options={options}
isMulti
placeholder="Select all the recommended vendors for the report. "
maxMenuHeight="270px"
/>
</FormGroup>
</div>
</div>
);
})) : (
<h2 className="text-center">No Categories Selected</h2>
);
return (
<Container className="container-width text-secondary">
<Form className="text-left">
{dataForms}
</Form>
</Container>)
}