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}

 

 

发布了430 篇原创文章 · 获赞 415 · 访问量 925万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览