反应打字稿 - 渲染时触发按钮onclick

Question

我在呈现一个单击功能的按钮时遇到问题，因为每当我尝试渲染它时，按钮上的onclick始终触发。

这是呈现组件的代码块：

                  <Table.Body>
                    {productNames.map((value, index) => {
                      return (
                        <Table.Row key={index}>
                          <Table.Cell>
                            <label>
                              {index}
                            </label>
                          </Table.Cell>
                          <Table.Cell>
                            <label>
                              {value}
                            </label>
                          </Table.Cell>
                          <Table.Cell>
                            <Button color="red" onClick={() => removeProduct(index) as any}>
                              Remove Product
                            </Button>
                          </Table.Cell>  
                        </Table.Row>
                        
                      )
                    })}
                  </Table.Body>

这是我的删除产品功能：

  function removeProduct(index: number) {
    const productArray: string[] = productNames;
    productArray.splice(index, 1);
    setProductNames(productArray as any);
    console.log("deleted")}

这是我的完整代码：

import React, { useState, useEffect } from "react";
import { css } from "@emotion/css";
import { Input, Button, Form, Segment, Dropdown, Grid, Icon, Table, Label } from "semantic-ui-react";
import Layout from "../common/Layout";

const inputStyle = css`
  width: 200px;
`;

const sectionStyle = css`
  margin: 1em 1em 0 1em;
`;

const optionStyle = css`
  padding: 15px;
  border-bottom: 0.5px solid #d3d3d3;
  display: flex;
  justify-content: space-between;
`;

const columnStyle = css`
  max-width: 1600px;
`;

const columnItemStyle = css`
  display: flex;
  flex-direction: row;
  gap: 5px;
`;

const buttonStyle = css`
  display: flex;
  align-items: flex-end;
  gap: 15px;
`;

const CreateDomainPage = (): JSX.Element => {
  const [domainName, setDomainName] = useState("");
  const [productNamesFieldValue, setProductNamesFieldValue] = useState("");
  const [productNames, setProductNames] = useState([]);
  const [quantitiveAttributeNames, setQuantitiveAttributeNames] = useState([]);
  const [qualitativeAttributeNames, setQualitativeAttributeNames] = useState([]);
  const [dateAttributeNames, setDateAttributeNames] = useState([]);
  const [qualitativeValueNames, setQualitativeValueNames] = useState([]);
  const [saveNewDomain, setSaveNewDomain] = useState(false);

  const handleResetButton = () => {
    setDomainName("");
    setProductNames([]);
    setQuantitiveAttributeNames([]);
    setQualitativeAttributeNames([]);
    setDateAttributeNames([]);
    setQualitativeValueNames([]);
  }

  const productOptions = [
    {key: 'a', text: 'Test a', value:'a'},
    {key: 'b', text: 'Test b', value:'b'},
    {key: 'c', text: 'Test c', value:'c'},
    {key: 'd', text: 'Test d', value:'d'},
    {key: 'e', text: 'Test e', value:'e'},
    {key: 'f', text: 'Test f', value:'f'}
  ]

  const options = [
    {key: 'b', text: 'Test a', value:'b'},
    {key: 'a', text: 'Test b', value:'a'},
    {key: 'c', text: 'Test c', value:'c'},
    {key: 'd', text: 'Test d', value:'d'},
    {key: 'e', text: 'Test e', value:'e'},
    {key: 'f', text: 'Test f', value:'f'}
  ]

  function addProduct(productName: string) {
    const productArray: string[] = productNames;
    productArray.push(productName);
    setProductNames(productArray as any);
    setProductNamesFieldValue("");
  }

  function removeProduct(index: number) {
    const productArray: string[] = productNames;
    productArray.splice(index, 1);
    setProductNames(productArray as any);
    console.log("deleted")
  }

  return (
    <Layout>
      <div className={sectionStyle}>
        <h1>Create a New Domain</h1>
        <Grid centered>
          <Grid.Column className={columnStyle}>
            <Segment>
              <Form>
                <Form.Field>
                  <label>Domain Name :</label>
                  <Input
                    className={inputStyle}
                    placeholder="Domain Name"
                    onChange={(e, {value}) => setDomainName(value)}
                    value={domainName}
                  />
                </Form.Field>
                <Form.Field>
                  <label>Product Names :</label>
                  <Input 
                    className={inputStyle}
                    placeholder="Product Names"
                    onChange={(e, {value}) => setProductNamesFieldValue(value)}
                    value={productNamesFieldValue}
                    onKeyDown={(e: KeyboardEvent) => e.key==="Enter"? addProduct(productNamesFieldValue) : null}
                  />
                  <Segment>
                    <Table celled>
                      <Table.Header>
                        <Table.Row>
                          <Table.HeaderCell>No. </Table.HeaderCell>
                          <Table.HeaderCell>Product Name</Table.HeaderCell>
                          <Table.HeaderCell>Action</Table.HeaderCell>
                        </Table.Row>
                      </Table.Header>

                      <Table.Body>
                        {productNames.map((value, index) => {
                          return (
                            <Table.Row key={index}>
                              <Table.Cell>
                                <label>
                                  {index}
                                </label>
                              </Table.Cell>
                              <Table.Cell>
                                <label>
                                  {value}
                                </label>
                              </Table.Cell>
                              <Table.Cell>
                                <Button color="red" onClick={() => removeProduct(index) as any}>
                                  Remove Product
                                </Button>
                              </Table.Cell>  
                            </Table.Row>
                            
                          )
                        })}
                      </Table.Body>
                    </Table>

                    
                  </Segment>
                </Form.Field>
                <Form.Field>
                  <label>Quantitive Attribute Names :</label>
                  <Dropdown 
                    placeholder="Quantitive Attribute Names" 
                    fluid multiple search selection
                    allowAdditions
                    // onAddItem={(event, data) => options.push({key: data.value as any, text: data.value as any, value: data.value as any})}
                    options={options}
                    onChange={(e, {value}) => setQuantitiveAttributeNames(value as any)} 
                    value={quantitiveAttributeNames}
                  />
                </Form.Field>
                <Form.Field>
                  <label>Qualitative Attribute Names :</label>
                  <Dropdown 
                    placeholder="Qualitative Attribute Names" 
                    fluid multiple search selection
                    allowAdditions
                    // onAddItem={(event, data) => options.push({key: data.value as any, text: data.value as any, value: data.value as any})}
                    options={options}
                    onChange={(e, {value}) => setQualitativeAttributeNames(value as any)} 
                    value={qualitativeAttributeNames}
                  />
                </Form.Field>
                <Form.Field>
                  <label>Date Attribute Names :</label>
                  <Dropdown 
                    placeholder="Date Attribute Names" 
                    fluid multiple search selection
                    allowAdditions
                    // onAddItem={(event, data) => options.push({key: data.value as any, text: data.value as any, value: data.value as any})}
                    options={options}
                    onChange={(e, {value}) => setDateAttributeNames(value as any)} 
                    value={dateAttributeNames}
                  />
                </Form.Field>
                <Form.Field>
                  <label>Qualitative Value Names :</label>
                  <Dropdown 
                    placeholder="Qualitative Value Names" 
                    fluid multiple search selection 
                    allowAdditions
                    // onAddItem={(event, data) => options.push({key: data.value as any, text: data.value as any, value: data.value as any})}
                    options={options}
                    onChange={(e, {value}) => setQualitativeValueNames(value as any)} 
                    value={qualitativeValueNames}
                  />
                </Form.Field>

                <Button color="teal" onClick={() => setSaveNewDomain(true)}>
                  Save Domain
                </Button>
                <Button color="red" onClick={() => handleResetButton()}>
                  Reset
                </Button>
              </Form>
            </Segment>
          </Grid.Column>
        </Grid>
      </div>
    </Layout>
  );
};

export default CreateDomainPage;

渲染时，如何避免使用此单击触发器？我试图将其绑定，但是根本无法触发onclick。我不能使用此在调用OnClick内部的功能时，我不知道为什么。

编辑

我在这里发现了一些奇怪的东西，我发现问题实际上在组件中。我尝试使用onClick（）函数也使用纯标签更改它，并且可以很好地奏效。

编辑

通过将type =“按钮”添加到按钮来解决的问题。

Answer 1

您的删除按钮没有问题，我尝试运行它并且未触发onclick按钮，我只编辑您的addproduct，remove> removeproduct

function addProduct() {
    setProductNames([...productNames, productNamesFieldValue]);
    setProductNamesFieldValue("");
}

function removeProduct(index: number) {
    setProductNames(productNames.filter((_: string, i: number) => i !== index));
    console.log("deleted", index);
}

和保存域< /code> button

<Button color="teal" onClick={addProduct}>
    Save Domain
</Button>

here is the sandbox