Question

我正在React中构建一个应用程序，该应用程序已连接到我之前编写的API。按钮正在渲染，但它们都同时更改。我需要有关如何编写代码以分离功能的建议。

我的应用程序使用.map呈现与约会相同数量的按钮，而约会是一个数组。当this.state.shown更改时，所有这些按钮都会更改，但是我需要分开所有按钮才能只显示我单击的按钮。现在，当我单击其中之一时，this.state.shown会更改其值，因此所有按钮都会更改，因为所有按钮都依赖于同一变量。我正在寻找有关如何将其分开的建议。

class AppointmentsList extends Component {
    constructor(props) {
        super(props);

        this.state = {
            appointments: [],
            isLoading: false,
            shown: false, //Variable to know if a button need to change and render the component
            customerUp: false
        }

        this.toggleCustomer = this.toggleCustomer.bind(this);
        //this.showCustomer = this.showCustomer.bind(this);
    }

    toggleCustomer() {
            this.setState({
                shown: !this.state.shown
            })
    } //This function change the value of shown when a Button is clicked.

    render() {
            const {appointments, isLoading} = this.state;

            if(isLoading) {
                return <p>Loading...</p>;
            }

            return(
            <div>
                <h2>Lista de citas</h2>
                {appointments.map((app) =>
                    <div key={app.id}>
                    <p>Fecha: {app.appointment}</p>
                    <p>Cliente: {app.customer.name}</p>
                    <p>Id: {app.customer.id}</p>
                { this.state.shown ? <Button key={app.customer.id} color="danger" onClick={() => this.toggleCustomer() }>Ocultar cliente</Button> : <Button key={app.customer.id} color="danger" onClick={() => this.toggleCustomer() }>Ver cliente</Button> } 
                { this.state.shown ? <CustomerView id={app.customer.id} /> : null }
                    </div>
                )}
            </div>
        )
    }

如何重新组织代码以分别呈现按钮？

谢谢。

Answer 1

您可以在 AppointmentsList 组件内为按钮（buttonComponent）创建单独的组件，并传递显示的道具和componentDidMount中buttonComponent的内容将道具复制到 buttonComponent 的状态。

这样，每个按钮将具有自己的状态，该状态管理shown。

按钮组件：

import react from 'react';

interface buttonComponentProps{
  shown: boolean;
}

interface buttonComponentState{
  shown: boolean;
}


class buttonComponent extends react.Component<buttonComponentProps,{}>{
 constructor(props:buttonComponentProps){
   super();
   this.state{
     shown:props.shown
   }
 }

 ....
}

export default buttonComponent;

Answer 2

方法1：您可以使显示状态成为类似以下对象的对象：

state = {
  shown:{}
}

toggleCustomer(id) {
 const updatedShownState = {...this.state.shown};
 updatedShownState[id] = updatedShownState[id] ? false : true;
            this.setState({
                shown: updatedShownState,
            })
    } //This function change the value of shown when a Button is clicked.

    render() {
            const {appointments, isLoading} = this.state;

            if(isLoading) {
                return <p>Loading...</p>;
            }

            return(
            <div>
                <h2>Lista de citas</h2>
                {appointments.map((app) =>
                    <div key={app.id}>
                    <p>Fecha: {app.appointment}</p>
                    <p>Cliente: {app.customer.name}</p>
                    <p>Id: {app.customer.id}</p>
                { this.state.shown[app.customer.id] ? <Button key={app.customer.id} color="danger" onClick={() => this.toggleCustomer(app.customer.id) }>Ocultar cliente</Button> : <Button key={app.customer.id} color="danger" onClick={() => this.toggleCustomer() }>Ver cliente</Button> } 
                { this.state.shown[app.customer.id] ? <CustomerView id={app.customer.id} /> : null }
                    </div>
                )}
            </div>
        )
    }

方法2：为Button和Customer创建单独的组件

return(
                <div>
                    <h2>Lista de citas</h2>
                    {appointments.map((app) =>
                       <Appointment key = {app.id} app = {app} />
                    )}
                </div>
            )
        }

class Appointment extends Component {
state = {
shown: false,
}

 toggleCustomer() {
     this.setState({
         shown: !this.state.shown
    })
}
render() {
const { app } = this.props;
return (
   <div key={app.id}>
     <p>Fecha: {app.appointment}</p>
     <p>Cliente: {app.customer.name}</p>
     <p>Id: {app.customer.id}</p>
     { this.state.shown ? <Button key={app.customer.id} color="danger" onClick={() => this.toggleCustomer() }>Ocultar cliente</Button> : <Button key={app.customer.id} color="danger" onClick={() => this.toggleCustomer() }>Ver cliente</Button> } 
    { this.state.shown ? <CustomerView id={app.customer.id} /> : null }
  </div>
)
}
}

让我知道它是否有效以及您喜欢的方法。

多个按钮执行相同操作

2 个答案: