Javascript 在React中切换单个元素_Javascript_Reactjs_Toggle

Javascript 在React中切换单个元素

javascript reactjs

Javascript 在React中切换单个元素,javascript,reactjs,toggle,Javascript,Reactjs,Toggle,我有一个问题。我在react中创建了联系人表单，我只想折叠单击的单个联系人。Toggle是应该折叠它的方法。科拉普塞是一个国家。我的问题是，当我单击它时，会影响所有接触，并且所有接触都被折叠。我怎样才能改进它 ContactBook.js import React, { Component } from "react"; import Contact from "../Contact/Contact"; import "./ContactBook

我有一个问题。我在react中创建了联系人表单，我只想折叠单击的单个联系人。Toggle是应该折叠它的方法。科拉普塞是一个国家。我的问题是，当我单击它时，会影响所有接触，并且所有接触都被折叠。我怎样才能改进它

ContactBook.js

import React, { Component } from "react";
import Contact from "../Contact/Contact";
import "./ContactBook.css";

class ContactBook extends Component{
    constructor(props){
        super(props);
        this.state = { 
          colapse :true,
          contacts: [
              {
                id: 1,
                name: 'Propulsion Academy',
                address: 'Zurich',
                avatar: 'propulsion-academy-logo.png'
              },
              {
                id: 2,
                name: 'Propulsion Academy',
                address: 'Luzern',
                avatar: 'propulsion-academy-logo.png'
              },  
              {
                id: 3,
                name: 'Propulsion Academy',
                address: 'Munich',
                avatar: 'propulsion-academy-logo.png'
              },                
            ],
          };     
      }  

      toggle=()=>{
        const doesShow = this.state.colapse;
        this.setState({colapse: !doesShow});
      }

      deleteContact=(contactIndex)=>{
        //with slice method we create copy of an array
        const contacts =this.state.contacts.slice();
        contacts.splice(contactIndex, 1);
        this.setState({contacts: contacts})
      }

      //get name from input
      addName = e =>{
        this.setState({ 
        name: e.target.value,  
        })
      }
      //get address from input
      addAddress = e =>{
        this.setState({ 
        address: e.target.value,
        })
      }

      //update state on button click
      handleSubmit = (e) =>{
        e.preventDefault()  
        if(this.state.name && this.state.address) {
          this.setState(state =>{
            const newContact = {
              id: Math.max(...state.contacts.map(c => c.id))+1,
              name: this.state.name,
              address: this.state.address,
            }
            return{
              contacts:[...state.contacts, newContact]
              }
          })   
        }
      }
    

      render() {
        return (
          <div className="contactBook">
            
             <form className ="addContact"  >
            <p>New Contact</p>
            <label id="name"><p>Name</p><input type='text' id="name" onChange={this.addName}/></label> 
            <label id="address"><p>Address:</p><input type='text' id="address" onChange={this.addAddress} /></label> 
            <input type='file' name='file'  />
            <button type='submit' onClick= {this.handleSubmit}>SUBMIT</button>
          </form>
            
            
            <div className="contacts">         
            {this.state.contacts.map((contact, index) =>
              < Contact key={contact.id} contact={contact} delete={()=>this.deleteContact(index)} colapse={this.state.colapse} toggle={this.toggle}/>)              
            }
              </div>
          </div>
        );
      }
};

export default ContactBook;

import React, { Component } from "react";
import Contact from "./Contact";
// import "./ContactBook.css";

class ContactBook extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contacts: [
        {
          id: 1,
          name: "Propulsion Academy",
          address: "Zurich",
          avatar: "propulsion-academy-logo.png",
          colapse: true
        },
        {
          id: 2,
          name: "Propulsion Academy",
          address: "Luzern",
          avatar: "propulsion-academy-logo.png",
          colapse: true
        },
        {
          id: 3,
          name: "Propulsion Academy",
          address: "Munich",
          avatar: "propulsion-academy-logo.png",
          colapse: true
        }
      ]
    };
  }

  // toggle = () => {
  //   const doesShow = this.state.colapse;
  //   this.setState({ colapse: !doesShow });
  // };

  deleteContact = contactIndex => {
    //with slice method we create copy of an array
    const contacts = this.state.contacts.slice();
    contacts.splice(contactIndex, 1);
    this.setState({ contacts: contacts });
  };
  togglecontact = contactIndex => {
    let contacts = this.state.contacts.slice();
    contacts[contactIndex].colapse = !contacts[contactIndex].colapse;
    this.setState({ contacts: contacts });
  };

  //get name from input
  addName = e => {
    this.setState({
      name: e.target.value
    });
  };
  //get address from input
  addAddress = e => {
    this.setState({
      address: e.target.value
    });
  };

  //update state on button click
  handleSubmit = e => {
    e.preventDefault();
    if (this.state.name && this.state.address) {
      this.setState(state => {
        const newContact = {
          id: Math.max(...state.contacts.map(c => c.id)) + 1,
          name: this.state.name,
          address: this.state.address
        };
        return {
          contacts: [...state.contacts, newContact]
        };
      });
    }
  };

  render() {
    return (
      <div className="contactBook">
        <form className="addContact">
          <p>New Contact</p>
          <label id="name">
            <p>Name</p>
            <input type="text" id="name" onChange={this.addName} />
          </label>
          <label id="address">
            <p>Address:</p>
            <input type="text" id="address" onChange={this.addAddress} />
          </label>
          <input type="file" name="file" />
          <button type="submit" onClick={this.handleSubmit}>
            SUBMIT
          </button>
        </form>

        <div className="contacts">
          {this.state.contacts.map((contact, index) => (
            <Contact
              key={contact.id}
              contact={contact}
              togglecontact={() => this.togglecontact(index)}
              delete={() => this.deleteContact(index)}
              colapse={this.state.colapse}
              toggle={this.toggle}
            />
          ))}
        </div>
      </div>
    );
  }
}

export default ContactBook;

import React，{Component}来自“React”；
从“./Contact/Contact”导入联系人；
导入“/ContactBook.css”；
类ContactBook扩展组件{
建造师（道具）{
超级（道具）；
this.state={
是的，
联系人：[
{
id:1，
名称：“推进学院”，
地址：苏黎世，
阿凡达：“推进学院徽标.png”
},
{
id:2，
名称：“推进学院”，
地址：'Luzern'，
阿凡达：“推进学院徽标.png”
},  
{
id:3，
名称：“推进学院”，
地址：慕尼黑，
阿凡达：“推进学院徽标.png”
},                
],
};     
}  
切换=（）=>{
const doesShow=this.state.colapse；
this.setState（{colapse:！doesShow}）；
}
deleteContact=（contactIndex）=>{
//使用slice方法创建数组的副本
const contacts=this.state.contacts.slice（）；
触点。拼接（触点索引，1）；
this.setState（{contacts:contacts}）
}
//从输入中获取名称
addName=e=>{
这个.setState（{
名称：e.target.value，
})
}
//从输入获取地址
addAddress=e=>{
这个.setState（{
地址：e.target.value，
})
}
//单击按钮时更新状态
handleSubmit=（e）=>{
e、 预防默认值（）
if（this.state.name&&this.state.address）{
this.setState（state=>{
常数newContact={
id:Math.max（…state.contacts.map（c=>c.id））+1，
名称：this.state.name，
地址：this.state.address，
}
返回{
联系人：[…state.contacts，newContact]
}
})   
}
}
render（）{
返回(
新联系人
姓名
地址：
提交
{this.state.contacts.map（（联系人，索引）=>
this.deleteContact（index）}colapse={this.state.colapse}toggle={this.toggle}/>）
}
);
}
};
导出默认通讯录；

Contact.js

import React from "react";
import "./Contact.css";
import avatar from '../assets/user.png'




const Contact = (props) =>{
       
    return (
            <div className = "col" >
                <img src={avatar}  alt="avatar" onClick={props.toggle}/>           
                {props.colapse === true ?
                <div>
                    <p>Name: {props.contact.name}</p> 
                    <p>Address: {props.contact.address}</p>
                    <button onClick={props.delete}> Delete </button>   
                 </div> : null
                  }

            </div>
        )
};

export default Contact;

从“React”导入React；
导入“/Contact.css”；
从“../assets/user.png”导入化身
常量联系人=（道具）=>{
返回(
{props.colapse==true？
名称：{props.contact.Name}
地址：{props.contact.Address}
删除
：null
}
)
};
导出默认联系人；

所有联系人都有一个函数，由于使用了.map（），它们的行为都相同，因为切换其中一个会切换用于呈现所有单个联系人的状态。解决方案是在您的状态下传递所选联系人，以便您的应用程序实际知道要呈现哪个联系人！希望这是有道理的

祝你好运，让我们知道事情是如何发展的

所有联系人都有一个函数，由于使用.map（），它们的行为都相同，因为切换一个会切换用于呈现所有单个联系人的状态。解决方案是在您的状态下传递所选联系人，以便您的应用程序实际知道要呈现哪个联系人！希望这是有道理的

祝你好运，让我们知道事情是如何发展的

我建议您将折叠和他的方法移动到接触组件，如下所示：

const Contact = (props) =>{
    [collapse,setCollapse] = useState(true)
    return (
            <div className = "col" >
                <img src={avatar}  alt="avatar" onClick{()=>setCollape(prev=>!prev)}/>           
                {collapse === true ?
                <div>
                    <p>Name: {props.contact.name}</p> 
                    <p>Address: {props.contact.address}</p>
                    <button onClick={props.delete}> Delete </button>   
                 </div> : null
                  }

            </div>
        )
};

const Contact=（道具）=>{
[collapse，setCollapse]=useState（true）
返回(
setCollape（prev=>！prev）}/>
{collapse===true？
名称：{props.contact.Name}
地址：{props.contact.Address}
删除
：null
}
)
};

在这个组件中，我创建了一个状态来管理贴图中渲染的每个组件的折叠。

此外，prev会提供您提交的最后一个值，最好使用prev，而不仅仅是

setCollapse（！collapse）

我建议您将collapse及其方法移动到Contact组件，如下所示：

const Contact = (props) =>{
    [collapse,setCollapse] = useState(true)
    return (
            <div className = "col" >
                <img src={avatar}  alt="avatar" onClick{()=>setCollape(prev=>!prev)}/>           
                {collapse === true ?
                <div>
                    <p>Name: {props.contact.name}</p> 
                    <p>Address: {props.contact.address}</p>
                    <button onClick={props.delete}> Delete </button>   
                 </div> : null
                  }

            </div>
        )
};

const Contact=（道具）=>{
[collapse，setCollapse]=useState（true）
返回(
setCollape（prev=>！prev）}/>
{collapse===true？
名称：{props.contact.Name}
地址：{props.contact.Address}
删除
：null
}
)
};

在这个组件中，我创建了一个状态来管理贴图中渲染的每个组件的折叠。此外，prev会给出您提交的最后一个值，最好使用prev，而不仅仅是

setCollapse（！collapse）

就是这样： ContactBook.js

import React, { Component } from "react";
import Contact from "../Contact/Contact";
import "./ContactBook.css";

class ContactBook extends Component{
    constructor(props){
        super(props);
        this.state = { 
          colapse :true,
          contacts: [
              {
                id: 1,
                name: 'Propulsion Academy',
                address: 'Zurich',
                avatar: 'propulsion-academy-logo.png'
              },
              {
                id: 2,
                name: 'Propulsion Academy',
                address: 'Luzern',
                avatar: 'propulsion-academy-logo.png'
              },  
              {
                id: 3,
                name: 'Propulsion Academy',
                address: 'Munich',
                avatar: 'propulsion-academy-logo.png'
              },                
            ],
          };     
      }  

      toggle=()=>{
        const doesShow = this.state.colapse;
        this.setState({colapse: !doesShow});
      }

      deleteContact=(contactIndex)=>{
        //with slice method we create copy of an array
        const contacts =this.state.contacts.slice();
        contacts.splice(contactIndex, 1);
        this.setState({contacts: contacts})
      }

      //get name from input
      addName = e =>{
        this.setState({ 
        name: e.target.value,  
        })
      }
      //get address from input
      addAddress = e =>{
        this.setState({ 
        address: e.target.value,
        })
      }

      //update state on button click
      handleSubmit = (e) =>{
        e.preventDefault()  
        if(this.state.name && this.state.address) {
          this.setState(state =>{
            const newContact = {
              id: Math.max(...state.contacts.map(c => c.id))+1,
              name: this.state.name,
              address: this.state.address,
            }
            return{
              contacts:[...state.contacts, newContact]
              }
          })   
        }
      }
    

      render() {
        return (
          <div className="contactBook">
            
             <form className ="addContact"  >
            <p>New Contact</p>
            <label id="name"><p>Name</p><input type='text' id="name" onChange={this.addName}/></label> 
            <label id="address"><p>Address:</p><input type='text' id="address" onChange={this.addAddress} /></label> 
            <input type='file' name='file'  />
            <button type='submit' onClick= {this.handleSubmit}>SUBMIT</button>
          </form>
            
            
            <div className="contacts">         
            {this.state.contacts.map((contact, index) =>
              < Contact key={contact.id} contact={contact} delete={()=>this.deleteContact(index)} colapse={this.state.colapse} toggle={this.toggle}/>)              
            }
              </div>
          </div>
        );
      }
};

export default ContactBook;

import React, { Component } from "react";
import Contact from "./Contact";
// import "./ContactBook.css";

class ContactBook extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contacts: [
        {
          id: 1,
          name: "Propulsion Academy",
          address: "Zurich",
          avatar: "propulsion-academy-logo.png",
          colapse: true
        },
        {
          id: 2,
          name: "Propulsion Academy",
          address: "Luzern",
          avatar: "propulsion-academy-logo.png",
          colapse: true
        },
        {
          id: 3,
          name: "Propulsion Academy",
          address: "Munich",
          avatar: "propulsion-academy-logo.png",
          colapse: true
        }
      ]
    };
  }

  // toggle = () => {
  //   const doesShow = this.state.colapse;
  //   this.setState({ colapse: !doesShow });
  // };

  deleteContact = contactIndex => {
    //with slice method we create copy of an array
    const contacts = this.state.contacts.slice();
    contacts.splice(contactIndex, 1);
    this.setState({ contacts: contacts });
  };
  togglecontact = contactIndex => {
    let contacts = this.state.contacts.slice();
    contacts[contactIndex].colapse = !contacts[contactIndex].colapse;
    this.setState({ contacts: contacts });
  };

  //get name from input
  addName = e => {
    this.setState({
      name: e.target.value
    });
  };
  //get address from input
  addAddress = e => {
    this.setState({
      address: e.target.value
    });
  };

  //update state on button click
  handleSubmit = e => {
    e.preventDefault();
    if (this.state.name && this.state.address) {
      this.setState(state => {
        const newContact = {
          id: Math.max(...state.contacts.map(c => c.id)) + 1,
          name: this.state.name,
          address: this.state.address
        };
        return {
          contacts: [...state.contacts, newContact]
        };
      });
    }
  };

  render() {
    return (
      <div className="contactBook">
        <form className="addContact">
          <p>New Contact</p>
          <label id="name">
            <p>Name</p>
            <input type="text" id="name" onChange={this.addName} />
          </label>
          <label id="address">
            <p>Address:</p>
            <input type="text" id="address" onChange={this.addAddress} />
          </label>
          <input type="file" name="file" />
          <button type="submit" onClick={this.handleSubmit}>
            SUBMIT
          </button>
        </form>

        <div className="contacts">
          {this.state.contacts.map((contact, index) => (
            <Contact
              key={contact.id}
              contact={contact}
              togglecontact={() => this.togglecontact(index)}
              delete={() => this.deleteContact(index)}
              colapse={this.state.colapse}
              toggle={this.toggle}
            />
          ))}
        </div>
      </div>
    );
  }
}

export default ContactBook;

import React，{Component}来自“React”；
从“/Contact”导入联系人；
//导入“/ContactBook.css”；