Question

我有两页，第一页（主页），向我展示从axios调用（获取）中恢复的所有产品。第二页显示为每个产品创建的所有警告消息。

this.state = {
            products: [],


modalIsOpen:{
                creaAlert: false,
            },
            createAlert:{
                name: '',
                description: '',
            },

          componentDidMount() {
        axios.get(`./products.json`)
          .then(res => {this.setState({ products: res.data});
          })
      }

    actionTemplate = () => {
        return  <Button label="NEW ALERT" className="p-button-success" onClick={() => this.toggleModal('creaAlert')} />;
    }

    toggleModal = modalName => {
        this.setState(prevState => ({modalIsOpen: {...prevState.modalIsOpen,
                [modalName]: !prevState.modalIsOpen[modalName]}
        }));
    }

createAlert = () => {
    axios.post... data: this.state.createAlert
}
     render() {
            const columns = [
                {field: 'product', header: 'Product',headerStyle:"color:'blue'"},
                {body: this.actionTemplate }
            ];

    <DataTable value={this.props.products}>
                    {dynamicColumns}
                </DataTable>

当我单击按钮时，将打开一个模式以创建警报，但是，它不知道在哪个产品上创建警告

如何在单击按钮时进行操作，对与单击按钮相对应的元素进行发布调用？（例如，将首页上的产品ID传递给api）

Answer 1

在actionTemplate中，您可以传递rowData和column，请参阅https://www.primefaces.org/primereact/#/datatable/templating

actionTemplate

actionTemplate = (rowData, column) => {
        return  <Button label="NEW ALERT" className="p-button-success" onClick={() => this.toggleModal('creaAlert',rowData)} />;
 }

toogleModal

toggleModal = (modalName,rowData) => {
            console.log(rowData);
            this.setState(prevState => ({modalIsOpen: {...prevState.modalIsOpen,
                    [modalName]: !prevState.modalIsOpen[modalName]}
            }));
 }

请在代码沙箱https://codesandbox.io/s/9llj5z2jop中查看完整的解决方案

在特定项目上创建警告消息

1 个答案: