javascript - 单击按钮时反应渲染新组件

Question

所以我试图在每次点击按钮时渲染一个组件。例如，每次单击按钮时显示文本或每次单击按钮时显示新的输入框。在下面的代码中，我只是尝试在每次单击按钮时在 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>)
}

标签： javascriptreactjsfrontend