多狀態的變化作出反應

Question

假設我有一個設置在我作出反應的應用程序篩選，有三個設置

1. 啓用的thingie
2. 使用竅門
3. 激活小玩意兒

什麼是最好的方式處理來自所有這些控件的所有onchange事件？下面是我在一分鐘

import React from 'react'; 
import Modal from 'react-bootstrap-modal'; 
  
export default class Settings extends React.Component { 

    constructor (props) { 
    super(props) 
    this.state = { 
     open: false  
    } 
    this.handleThingieChange = this.handleThingieChange.bind(this); 
    this.handleDoohickeyChange = this.handleDoohickeyChange.bind(this); 
    this.handleGizmoChange = this.handleGizmoChange.bind(this); 
    } 

    handleThingieChange(e) { 
    this.props.onThingieChange(e.target.value) 
    } 

    handleDoohickeyChange(e) { 
    this.props.onDoohickeyChange(e.target.value); 
    } 

    handleGizmoChange(e) { 
    this.props.onGizmoChange(e.target.checked); 
    } 

  render() { 
    return (
      <div> 
     <label>enable thingie</label>   
     <input type="checkbox" checked={this.props.thingie} onChange={this.handleThingieChange} /> 
     <label>use doohickey</label> 
     <input type="checkbox" checked={this.props.doohickey} onChange={this.handleDoohickeyChange} /> 
     <label>activate gizmo</label> 
     <input type="checkbox" checked={this.props.gizmo} onChange={this.handleGizmoChange} /> 
      </div> 
    ) 
  } 
} 

在我<App>組件：

thingieChange(thingie){ 
    this.setState({ thingie: thingie }) 
} 

doohickeyChange(doohickey){ 
    this.setState({ doohickey: doohickey }) 
} 

gizmoChange(gizmo){ 
    this.setState({ gizmo: gizmo }) 
} 

// render method is most important 
// render method returns JSX template 
render() { 
    return (
     <form> 
     <h2>headerooney</h2> 
     <Settings 
      onThingieChange={this.thingieChange.bind(this)} 
      onDoohickeyChange={this.doohickeyChange.bind(this)} 
      onGizmoChange={this.gizmoChange.bind(this)} /> 
     </form> 
    ); 
} 

我的應用程序可能有20個或30個設置，好像必須有一個更好的方式來做到這一點比通過重複這種模式20-30次？

我是新來的反應，如果我是建設這與jQuery我會做這樣的事情：

  <div> 
    <label>enable thingie</label>   
    <input type="checkbox" data-property='thingie' /> 
    <label>use doohickey</label> 
    <input type="checkbox" data-property='doohickey' /> 
    <label>activate gizmo</label> 
    <input type="checkbox" data-property='gizmo' /> 
    </div> 

像這樣

$(function(){ 

    $.each(options, function(k, v) { 
     $("[data-property='" + k + "']")[0].checked = v; 
    }); 

    $(document).on("click", "input[type='checkbox']", function(){ 
     var propertyName = $(this).data("property"); 
     options[propertyName] = $(this)[0].checked; 
     console.log(options); 
    }) 

}); 

通用單擊處理我如何在反應中做相同的事情？我不想爲每個設置花費兩個小時編寫處理函數

Answer 1

如果您的所有控件都只是複選框，那麼爲什麼不爲一個設置創建一個組件，然後讓一個Settings組件將其全部列出。

您可以提供設置的名稱作爲組件的屬性，以便它知道它正在更新的內容。您可以將設置組件中的功能傳遞給提供更新狀態手段的設置組件。

解決這個問題的另一個更復雜的選擇是使用Redux，但對於這種簡單的事情可能不需要（儘管它可以在簡化測試等方面提供很多好處）。

雖然我會建議，只要你看到任何一種重複模式，你試圖把它抽象成可重用的組件 - 它肯定會節省你的時間在長遠。