按鈕點擊反應表格行顯示列表

Question

我有一個表格是通過映射到一個數組動態構建的。數組中的每個項目都有一行。其中每一行中的一列是select。我只希望該列的內容在單擊同一行下一列中的按鈕時顯示。

我的計劃是爲我的數組中的每個對象添加某種切換布爾屬性，但當我嘗試在按鈕的onclick中切換它時，我的eslint抱怨，因爲我試圖修改我發送到由onclick調用的函數中的參數。

什麼是適當的方法來做到這一點？

這裏的表的代碼：

<table> 
    <tbody> 
    {myArray.map(row => (
     <tr key={`test-${row.name}`}> 
     <td> 
      <div className="testClass">{row.id}</div> 
     </td> 
     <td>{row.name}</td> 
     <td> 
      <Select 
      options={this.getOptions(row.id)} 
      onSelect={this.onOptionSelect} 
      placeholder="Select something" 
      /> 
     </td> 
     <td><button onClick={() => { changeStuff(row); }}>{ row.myToggle ? 'Save' : 'Change something' }</button></td> 
     </tr> 
    ))} 
    </tbody> 
</table> 

Answer 1

在單擊處理程序，你可以完全更新您的陣列來顯示/隱藏選擇選項。

基於我的理解，我嘗試過創建下面的代碼片段。按照我的理解，這是我能夠想出的方式。我在對象數組中維護了「隱藏」字段。我使用了一個簡單的按鈕，而不是'選擇'。你可以相應地改變。希望這可以幫助。

const list = [ 
 
    { 
 
    name: "Person 1", 
 
    phone: "123-4567", 
 
    id: 11, 
 
    hidden:true 
 
    }, 
 
    { 
 
    name: "Person 2", 
 
    phone: "123-4567", 
 
    id: 12, 
 
    hidden:true 
 
    }, 
 
    { 
 
    name: "Person 3", 
 
    phone: "123-4567", 
 
    id: 23, 
 
    hidden:true 
 
    }, 
 
    { 
 
    name: "Person 4", 
 
    phone: "123-4567", 
 
    id: 34, 
 
    hidden:true 
 
    }, 
 
    { 
 
    name: "Person 5", 
 
    phone: "123-4567", 
 
    id: 45, 
 
    hidden:true 
 
    } 
 
]; 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.state = { 
 
     list: list 
 
    }; 
 
    this.handleClick = this.handleClick.bind(this); 
 
    } 
 

 
    handleClick(item) { 
 
    let updatedList = this.state.list.map(obj => { 
 
     if(obj.id === item.id) { 
 
     return Object.assign({}, obj, { 
 
      hidden:!item.hidden 
 
     }); 
 
     } 
 
     return obj; 
 
    }); 
 
    this.setState({ 
 
     list : updatedList 
 
    }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <table> 
 
      <tbody> 
 
      {this.state.list.map(item => 
 
       <tr key={item.itemId}> 
 
       <td> 
 
        {item.name} 
 
       </td> 
 
       <td> 
 
        {item.phone} 
 
       </td> 
 
       <td > 
 
        <button hidden={item.hidden}> Action </button> 
 
       </td> 
 
       <td> 
 
        <button 
 
        className="delete" 
 
        onClick={() => this.handleClick(item)} 
 
        > 
 
        Change 
 
        </button> 
 
       </td> 
 
       </tr> 
 
      )} 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(<App />, document.getElementById("app"));

table td { 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    padding: 10px; 
 
    border: 1px solid #eee; 
 
}

<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="app"></div>