ボタンを押したときにチェック項目を削除する

Question

これを行うにはどうしたらいいですか？

子コンポーネントとしてチェックボックスを設定する必要がありますか？ - >削除イベントをサブコンポーネントに渡すにはどうすればよいですか？

私は子コンポーネントは、私は、各項目をループするループのために必要になるので、チェックボックスを設定し、それが確認されていますならば、私はエレガントな解決策があると確信している

を削除する場合はtrue、チェックしない場合しかし、私はReactを始めたばかりで、まだコンセプトの周りに頭を浮かべているわけではありません。もし私の理解を助けることができる追加の読書があれば、教えてください！

Answer 1

私が考えることができる最も簡単な方法は、チェックボックスの配列（または少なくともチェックボックス状態）を含むコンポーネントを持つことです。コンポーネントには、チェックボックスが表示されます。ボタンをクリックすると、配列が繰り返され、チェックボックスがすべて削除されます。

すべてのコンポーネントを1つのコンポーネントに保存したくない場合は、これを実行する方法は複数あります。たとえば、ボタンとチェックボックスの配列を親コンポーネントに簡単に保持し、配列を子コンポーネントの小道具として渡すことができます。

fluxをご覧になりたい場合は、アプリケーションの状態（チェックボックスの配列）を処理する方法です。フラックスの普及した実装はreduxです。

また、上記のようにフラックスなしでリアクトを使用することもできます。ここには8 no-flux stragergies for react component communicationに関する記事があります。

Answer 2

親コンポーネントは、基本的に子のリストと削除する子のリストを保持します。チェックボックスをオンにするたびに、それはdelete-listに追加され、チェックされていなければdelete-listから削除されます。削除ボタンがヒットすると、delete-listのすべての項目が子リストから取り除かれ、delete-listがクリアされ、setStateが呼び出されてコンポーネントが再レンダリングされます。

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class Form extends React.Component { 
    constructor(props) { 
    super(props) 
    } 
    // A delete-list and a list of children. 
    state = { 
    toDel: [], 
    checks: [] 
    } 
    // Method called when checkbox is clicked. 
    recId = (idToDel) => { 
    // Grab the checkbox that was clicked. 
    let checker = document.getElementById(idToDel); 
    if (checker.checked) { 
     // Add the id to delete-list. 
     this.state.toDel.push(idToDel); 
    } 
    else { 
     // Remove the id from delete-list. 
     let index = this.state.toDel.indexOf(idToDel); 
     this.state.toDel.splice(index, 1); 
    } 
    } 
    // Method called when delete button is clicked. 
    del =() => { 
    // Loop through items to delete. 
    for (var i = 0; i < this.state.toDel.length; i++) { 
     // Convert id from string back to integer. 
     let index = parseInt(this.state.toDel[i]) 
     // Replace the item to delete with empty string, so that every 
     // other element remains in place. 
     this.state.checks[index] = ''; 
    } 
    // Re-render the component by calling setState. 
    this.setState({ 
     toDel: [], 
     checks: this.state.checks 
    }); 
    } 
    // Loading the component with child checkboxes. Children are handed 
    // parent methods as event handlers. 
    componentWillMount =() => { 
    for (var i = 0; i < 5; i++) { 
     this.state.checks.push(
     <p key={i}> 
      <Check id={i.toString()} record={this.recId} />{i.toString()} 
     </p> 
    ) 
    } 
    } 
    render() { 
    return (
     <div> 
     {this.state.checks} 
     <button onClick={this.del}>Delete</button> 
     </div> 
    ); 
    } 
} 

class Check extends React.Component { 
    constructor(props) { 
    super(props) 
    } 
    state = {} 
    render =() => { 
    // Call the parent method on click with proper context and pass 
    // id of this specific child back up to parent. 
    return (
     <input type='checkbox' onClick={this.props.record.bind(null, this.props.id)} id={this.props.id} /> 
    ); 
    } 
} 

// Render component. 
ReactDOM.render(
    <Form />, 
    document.getElementById('test-container') 
);