React多個輸入的解決方法與計算屬性名

React，當有處理多個受控的input元素時，你可以通過給每個元素添加一個name屬性，來讓處理函數根據 event.target.name的值來選擇做什麼。

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMale: true,
      friend: 2,
      domain: "https://aerchi.blog.csdn.net"
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }
  
  handleSubmit(event) {
    alert('Your family is: ' + this.state.isMale + " " + this.state.friend+ " "
      + this.state.domain);
    event.preventDefault();
  }

  render() {
    return (
      <form  onSubmit={this.handleSubmit}>
        <div>The Person Status</div>
        <label>
          Is Male:
          <input
            name="isMale"
            type="checkbox"
            checked={this.state.isMale}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of Friend:
          <input
            name="numberOfChildren"
            type="number"
            value={this.state.friend}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Web Url:
          <input
            name="domain"
            type="string"
            value={this.state.domain}
            onChange={this.handleInputChange} />
        </label>  
        <br />
        <hr />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <Reservation />,
  document.getElementById('root')
);

在CodePen 調試:  https://codepen.io/aerchi/pen/rbZagM

注意我們如何使用ES6當中的計算屬性名語法來更新與給定輸入名稱相對應的狀態鍵：

this.setState({
  [name]: value
});

相當於如下ES5語法

var partialState = {};
partialState[name] = value;
this.setState(partialState);

同樣由於 setState() 自動將部分狀態合併到當前狀態，因此我們只需要使用發生變化的部分調用它。

---

計算屬性名

從ECMAScript 2015開始，對象初始化語法開始支持計算屬性名。其允許在[]中放入表達式，計算結果可以當做屬性名。這種用法和用方括號訪問屬性非常類似，也許你已經用來讀取和設置屬性了。現在同樣的語法也可以用於對象字面值了：

// Computed property names (ES6)
var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

var param = 'size';
var config = {
  [param]: 12,
  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
};

console.log(config); // { size: 12, mobileSize: 4 }

 

對象初始化

可以通過new Object()， Object.create()方法，或者使用字面量標記（初始化標記）初始化對象。 一個對象初始化器，由花括號/大括號 ({}) 包含的一個由零個或多個對象屬性名和其關聯值組成的一個逗號分隔的列表構成。

var o = {};
var o = {a: 'foo', b: 42, c: {}};

var a = 'foo', b = 42, c = {};
var o = {a: a, b: b, c: c};

var o = {
  property: function ([parameters]) {},
  get property() {},
  set property(value) {}
};

重複屬性名

屬性使用了同樣的名稱時，後面的屬性會覆蓋前面的屬性。

var a = {x: 1, x: 2};
console.log(a); // { x: 2}