ボタンをクリックするとテーブルの行が表示されます

Question

配列をマッピングすることで動的にテーブルを構築しています。配列内の各項目は行を取得します。これらの行の列の1つは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>