子供の小道具を変更するには？

Question

私はReactを初めて使用しています。これはおそらくノブの質問です。

ユーザーがチェックボックスをクリックすると、MeteorGriddleコンポーネントの "filteredFields"小道具を変更したいと思います。私のJSX：

const bookingsPage =() => { 
    let filteredFields = ['userName']; 
    const handleClick = (e) => { 
     if (e.target.checked) { 
      filteredFields = ['userEmail']; 

      // How to propagate this change to the MeteorGriddle? 
     } 
    } 

    return (
     <div> 
      <label><input type="checkbox" defaultChecked="true" value="userEmail" onClick={handleClick}/>Email</label> 

      <MeteorGriddle filteredFields={filteredFields}/> 
     </div> 
    ); 
}; 

Answer 1

私はあなたの問題を解決する2つの方法を参照してください。

これを行うための第一及び簡単な方法は：ステートフルコンポーネントの代わりに、機能的にあなたのbookingsPageコンポーネントを回し

、 はその後、あなたはそれ内の状態を作成することができるだろうし、イベントに状態を変更MeteorGriddleコンポーネントに渡します。

ので、コードは次のようになります。

class bookingsPage extends React.Component { 
    getInitialState =() => { 
     filteredFields: [] 
    } 

    handleClick = (e) => { 
     if (e.target.checked) { 
      const newFilteredFields = 
       [ ...this.state.filteredFields ].push('userEmail'); 
      this.setState({ filteredFields: newFilteredFields }); 
     } 
    } 

    render() { 
    return (
     <div> 
      <label> 
       <input 
       type="checkbox" 
       defaultChecked="true" 
       value="userEmail" 
       onClick={this.handleClick} 
       /> 
       Email 
      </label> 

      <MeteorGriddle 
       filteredFields={this.state.filteredFields} 
      /> 
     </div> 
    ); 
    } 
}; 

第二に、これを行うには難しい方法：

はRedux上を見てみましょう。 Reactのデータフローの問題を解決します。 チェックボックスをオンにすると、反応コンポーネント（反応コンポーネントのグローバルデータストレージとも呼ばれます）にアクションが送信され、GriddleComponentはチェックボックスがオンであることを示す新しいデータでアプリケーションの新しい状態を取得します。

私はあなたに基づいて例を書いてほしいと言ってください。

Answer 2

@Maxxによると、状態のあるコンポーネントを使用する必要があります。次にsetStateメソッドを呼び出すと、再びレンダリングされ、子の小道具が更新されます。あなたのケースでは

これは（もES6表記を使用して）動作するはずです。これを達成するために、いくつかの方法があります

import React from 'react'; 
import MeteorGriddle from '...whatever path...'; 

class bookingsPage extends React.Component { 

    state = { 
    filteredFields: ['userName'] 
    }; 

    constructor(props) { 
    super(props); 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
    if (e.target.checked) { 
     this.setState({ 
     ...this.state, //This is just a good practice to not overwrite other properties 
     filteredFields: ['userEmail'] 
     }); 
    } 
    } 

    render() { 
    const { filteredFields } = this.state; 

    return(
     <div> 
      <label> 
      <input type="checkbox" defaultChecked="true" value="userEmail" 
       onChange={this.handleChange}/>Email 
      </label> 
      <MeteorGriddle filteredFields={filteredFields}/> 
     </div> 
    ); 
    } 
} 

Answer 3

、あなただけのことができます

import React from 'react'; 

class bookingsPage extends React.Component { 

    state = { 
    filteredFields: ['userName'] 
    }; 

constructor(props) { 
super(props); 
} 

handleChange(e) { 
if (e.target.checked) { 
    this.setState({ 
    filteredFields: ['userEmail'] 
    }); 
} 
} 
render() { 

return(
    <div> 
     <label> 
     <input type="checkbox" defaultChecked="true" value="userEmail" 
      onChange={this.handleChange.bind(this)}/>Email 
     </label> 
     <MeteorGriddle filteredFields={this.state.filteredFields}/> 
    </div> 
); 
}}