在React中实现用select标签进行联动切换效果。

    select标签在我们工作中会经常用到，比如省市县三级联动的效果。这里举出一个select二级联动例子，使用react的状态来控制select的值得输出，实现动态变换。小伙伴可以根据自己的业务需求来扩展或者改变初始状态值。以下用一个数组来模拟数据。react使用的版本号为16.0.0（目前是最新的嘎嘎）。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

const defineArr = [{name: '小明', things: ['小明的笔','小明的纸','小明的画']},{name: '小黑', things: ['小黑的笔','小黑的纸','小黑的画']},{name: '小黄', things: ['小黄的笔','小黄的纸','小黄的画']},{name: '小花', things: ['小花的笔','小花的纸','小花的画']}];

class App extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      selectName: defineArr[0].name,
      selectThing: defineArr[0].things[0],
    }
  };

  changeName(e) {
    this.setState({ selectName: e.target.value });
    defineArr.map((item, index) => {
      if(e.target.value === item.name) {
        this.setState({ selectThing: item.things[0] });
      }
      return true;
    })
  };

  changeThings(e) {
    this.setState({ selectThing: e.target.value });
  };

  render() {
    const names = defineArr.map((item, index) => {
      return <option key={index}>{item.name}</option>
    });
    const things = defineArr.map((item, index) => {
      if(this.state.selectName == item.name) {
        return item.things.map((item, index) =>
          <option key={index}>{item}</option>
        )
      }
      return true;
    });

    return (
      <div>
        <select value={this.state.selectName} onChange={this.changeName.bind(this)}>{names}</select>
        <select value={this.state.selectThing} onChange={this.changeThings.bind(this)}>{things}</select>
      </div>
    );
  }
};

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

需要说明的是selected这个属性如果使用的话react会出现警告，所以使用的是value属性，拿到状态值之后就可以相对应的编写对应页面了，如有不足之处也希望大神指点。