react省市二级联动

来源：互联网发布：淘宝网做包邮亏编辑：程序博客网时间：2024/05/14 02:55

class Province extends Component {  constructor(props) {    super(props)  }  handleChange(e) {    this      .props      .parentAction(e.target.value)  }  render() {    return (      <select onChange={this        .handleChange        .bind(this)}>        {this          .props          .value          .map((item, key) => (            <option value={item.zhou}>{item.zhou}</option>          ))}      </select>    )  }}//城市选择框class City extends Component {  render() {    return (      <select>        {this          .props          .value          .map(item => <option value={item}>{item}</option>)}      </select>    )  }}class Picker extends Component {  constructor(props) {    super(props)    this.state = {      province: [        {          id: 1,          zhou: "江苏",          country: ["南京", "苏州", "无锡"]        }, {          id: 2,          zhou: "安徽",          country: ["合肥", "芜湖"]        }      ],      isProvince: "江苏",      isCity: ''    }  }  handleParentAction(value) {    this.setState({isProvince: value})  }  render() {    return (      <div>        <Province          value={this.state.province}          parentAction={this          .handleParentAction          .bind(this)}/>        <City          value={this          .state          .province          .find((item) => {            return (item.zhou == this.state.isProvince)          })          .country}/>      </div>    )  }}

基于react的省份和市的二级联动，处理数据替换父组件中的province即可
注意点是： isPrivince这个state一定要设置成默认选中的那个省

改进版本

class ProvinceCity extends Component {  constructor(props) {    super(props)    this.state = {      priciList: [        {          id: 0,          province: '请选择省份',          cities: ['请选择城市']        }, {          id: 1,          province: '安徽',          cities: ['芜湖', '合肥']        }      ],      provinceSelected: '请选择省份',      citySelected: ''    }  }  handleProvinceChange(e) {    this.setState({provinceSelected: e.target.value})  }  handleCityChange(e) {    this.setState({citySelected: e.target.value})  }  handleProvinceBlur(e) {    this      .props      .parentAction({province: e.target.value})  }  handleCityBlur(e) {    this      .props      .parentAction({city: e.target.value})  }  render() {    return (      <div>        <select          onChange={this          .handleProvinceChange          .bind(this)}          onBlur={this          .handleProvinceBlur          .bind(this)}>          {this            .state            .priciList            .map((item, key) => (              <option value={item.province} key={key}>{item.province}</option>            ))}        </select>        <select          onChange={this          .handleCityChange          .bind(this)}          onBlur={this          .handleCityBlur          .bind(this)}>          {this            .state            .priciList            .find((item, key) => (item.province == this.state.provinceSelected))            .cities            .map((item, key) => (              <option value={item} key={key}>{item}</option>            ))}        </select>      </div>    )  }}class Parent extends Component {  constructor(props) {    super(props)    this.state = {      province: '',      city: ''    }  }  handleParentAction(value) {    value.city      ? this.setState({city: value.city})      : this.setState({province: value.province})  }  handleClick() {    console.log(this.state.province, this.state.city)  }  render() {    return (      <div>        <ProvinceCity          parentAction={this          .handleParentAction          .bind(this)}/>        <input value="点击"          type="button"          onClick={this          .handleClick          .bind(this)}/>      </div>    )  }}

阅读全文

0 0