如何更換小孩的道具？

我是React新手。這可能是一個noob問題。如何更換小孩的道具？

我想在用戶單擊複選框時更改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> 
    ); 
};

來源

2016-08-25 obiwahn

你可以'改變'props'。，改爲使用'states' –

在你的情況下，你無法使用無狀態組件。在處理程序中用'this.setState'創建具有狀態，狀態的常規組件，並將其作爲參數傳遞給'MeteorGriddle' – Maxx

我看到了解決問題的兩種方法。

做到這一點的第一個簡單的方法：

把你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中數據流的問題。基本概念是，當你檢查你的複選框時，你將一個動作發送到reducer（也就是你的全局數據存儲器中的反應組件），然後GriddleComponent通過新數據接收你的應用程序的新狀態，並告訴他複選框被選中。

說你是否想讓我爲你寫一個基於你的例子。

來源

2016-08-25 16:03:11 Syberic

Redux聽起來很有趣。你可以添加一個例子嗎？ – obiwahn

正如@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> 
    ); 
    } 
}

來源

2016-08-25 16:17:13 juanra

有很多方法來實現這個數字，你可以嘗試像下面的代碼，

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> 
); 
}}

來源

2016-08-25 18:57:36

如何更換小孩的道具？

回答

相關問題