我有一堂課，我在其中聲明：constructor() { super(); this.state = { checked: false, house: [], selectedHouse: null }; this.handleChange = this.handleChange.bind(this);}handleChange(checked) { this.setState({ checked });}render() { return ( <React.Fragment> <TSwitch handleChange={this.handleChange.bind(this)} house={this.state.house} houseClicked={this.h}></TSwitch> </React.Fragment> );}state.checked然后我想從子組件設置：function TSwitch(props) { const handleChange = (house) => (evt) => { props.handleChange(house); }; return ( <div> {props.house.map((house) => { return ( <label> <span>Switch with default style</span> <Switch onChange={handleChange} checked={this.state.checked} /> </label> ); })} </div> );}我可以調用handleChange，但我希望能夠更改組件的state.checked值<TSwitch/>。
3 回答
慕姐8265434
TA貢獻1813條經驗 獲得超2個贊
你的父組件應該是這樣的：
constructor() {
super();
this.state = {
checked: false,
house: [],
selectedHouse: null
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(checked) {
this.setState({ checked });
}
render() {
return (
<React.Fragment>
<TSwitch handleChange={this.handleChange} isChecked={this.state.checked} house={this.state.house}></TSwitch>
</React.Fragment>
);
}
您的子組件應如下所示：
function TSwitch(props) {
return (
<div>
{props.house.map((house) => {
return (
<label>
<span>Switch with default style</span>
<Switch onChange={x => props.handleChange(x)} checked={props.isChecked} />
</label>
);
})}
</div>
);
}
注意：您正在使用一個Switch組件，我不確定該變量是否x是 aboolean或 an object，但最有可能它應該是boolean:true或false。如果這不起作用，請記錄x& 的值，看看它是否是一個對象，并將布爾值傳遞到 中props.handleChange。雖然我仍然認為這沒有必要。祝你好運！
哈士奇WWW
TA貢獻1799條經驗 獲得超6個贊
1.
讓我們從你的直接問題開始
我希望能夠更改
state.checked組件<TSwitch/>的值
1.1 您已經正確地將您的變通函數handleChange從父類傳遞給了您的子類，但是您復制的子類內部的TSwitch抽象函數是不必要的，應該完全刪除。handleChange
1.2 接下來，回到類的handleChange函數，您需要handleChange通過修復傳遞給它的參數來修改父組件中的函數定義 - 這將是event隱式傳遞的對象，因為您將其注冊為onChange={handleChange}inside的回調Tswitch。在調用時，它將被調用，并且來自 React 的 evt 參數onChange將被傳遞到handleChange.?但是，你不需要它。它不攜帶您所必需的信息。所以我會完全忽略它。
// @ parent component
handleChange(evt) {
? // NOTE: i'm going to ignore the evt, since I don't need it.
? // NOTE: i'm going to use optional callback given by setState, to access prevState, and toggle the checked state boolean value.
? this.setState((prevState) => ({ checked: !prevState.checked }));
}
2.
現在讓我們清理您的代碼并討論一些最佳實踐
2.1 你不需要React.Fragment在這里使用。為什么？因為 React 16 中引入了 Fragments，以提供用于處理組件列表的聲明式 API。否則，它們就是不必要的抽象。意思是：如果你不直接處理同級組件，那么你不需要直接使用React.Fragmenta<div/>來代替；會更慣用。
2.2.?如果<TSwitch></TSwitch>不打算有直接后代，那么您應該將使用語法更改為<TSwitch/>.
2.3 如果 2.2 沒有被 linter 選中，那么我強烈建議您安裝一個。
2.4 如果您愿意，您可以繼續在構造函數中使用類處理程序的顯式綁定。這是學習 React 的良好第一步，但是，有最佳方法可以通過Babel 的轉換屬性插件刪除此樣板。
- 3 回答
- 0 關注
- 201 瀏覽
添加回答
舉報
0/150
提交
取消