僅在 React.js 中為單擊元素切換類

Question

我有一個帶有“ Edit按鈕的聯系人列表。 當它被點擊時，我想讓<div>出現輸入。 目前，當單擊按鈕時，此<div>將顯示在我的聯系人列表中的所有元素中。 這是代碼。 我沒有把從 API 等獲取聯系人的代碼放在這里。

``

class App extends Component {

  state = {
    contacts: [],
    firstName: '',
    lastName: '',
    phoneNumber: '',
    email: '',
    editVisible: true
  };

  showEditDiv = (id) => {
    this.setState({
      editVisible: !this.state.editVisible
    })
  };

  render() {

  const visibility = this.state.editVisible ? 'unvisible' : 'visible';

    return (
        <ul>
          {this.state.contacts.map(contact => {
            return (
              <div>
                <li key={contact.id}>
                  <p>{contact.firstName} {contact.lastName}</p>
                  <p>{contact.phoneNumber}</p>
                  <p>{contact.email}</p>
                  <button onClick={() => this.removeContact(contact.id)}>Remove</button>
                  <button onClick={() => this.showEditDiv(contact.id)}>Edit</button>
                  <div key={contact.id} className={`edit-form ${visibility}`}>
                    <p>This is edit form</p>
                  </div>
                </li>
              </div>
            )
          })}
        </ul>
      </div>
    );
  }
}

export default App;

 .edit-form { height: 100px; background: #a7a7a7; } .unvisible { display: none; } .visible { display: block; }

Answer 1

對於您的情況，您需要在您的狀態中保留一個單獨的屬性並設置單個項目的可見性。 這是一個工作示例。 如果我是你，我會將聯系項提取到它自己的組件中，並擺脫在onClick處理程序中調用的那些函數。

 class App extends React.Component { state = { contacts: [ { id: 1, firstName: "foo", lastName: "foo", email: "foo@foo.com" }, { id: 2, firstName: "bar", lastName: "bar", email: "bar@bar.com" } ], firstName: "", lastName: "", phoneNumber: "", email: "", editVisibles: {} }; showEditDiv = id => { this.setState(prevState => ({ editVisibles: { ...prevState.editVisibles, [id]: !prevState.editVisibles[id] } })); }; render() { return ( <ul> {this.state.contacts.map(contact => { return ( <div> <li key={contact.id}> <p> {contact.firstName} {contact.lastName} </p> <p>{contact.email}</p> <button onClick={() => this.removeContact(contact.id)}> Remove </button> <button onClick={() => this.showEditDiv(contact.id)}> Edit </button> <div key={contact.id} className={`edit-form ${ !this.state.editVisibles[contact.id] ? "unvisible" : "visible" }`} > <p>This is edit form</p> </div> </li> </div> ); })} </ul> ); } } ReactDOM.render(<App />, document.getElementById("root"));

 .edit-form { height: 100px; background: #a7a7a7; } .unvisible { display: none; } .visible { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>

Answer 2

您可以使用“contact.id”代替editVisible ，意思是：

showEditDiv = (id) => { 
   this.setState(prevState => ({ editingContactId: prevState.editingContactId === id? null:id})) 
};

div 將是：

<div key={contact.id} className={contact.id === this.state.editingContactId?'edit-form visible' :'edit-form unvisible'}>
  ... 
</div>