最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】ReactJS中如何根据option选项的选择决定条件渲染内容

ReactJS crifan 2245浏览 0评论

对于代码:

  render() {
    const { breedInfoDict } = this.state;
    return (
      <div class={style.content_div}>
        <div class={style.cows_n_box}>
          <ul><span>牛号</span>
            <li><p>{breedInfoDict.cow_code}</p></li>
          </ul>
          <ul><span>牛舍</span>
            <li><p>{breedInfoDict.cowshed}</p></li>
          </ul>
          <ul><span>本次预警</span>
            <li><p>{breedInfoDict.cur_alarm_time}</p></li>
          </ul>
          <ul><span>上次预警</span>
            <li><p>{breedInfoDict.last_alarm_time}</p></li>
          </ul>
          <ul><span>是否配种</span>
            <li>
              <select dir="rtl" class={style.ui_select} onChange="javascript:test(‘peng_x’+this.value)">
                <option value="0" selected="selected">请选择</option>
                <option value="1">是</option>
                <option value="2">否</option>
              </select>
            </li>
            <i/>
          </ul>
          <div id="pp_w1" style="display:none;">
            <ul><span>与配公牛</span>
              <li><input value="" class={style.ui_input} name="" type="text" placeholder="请填写" /></li>
            </ul>
            <ul><span>精液数量</span>
              <li><input value="" class={style.ui_input} name="" type="text" placeholder="请填写" /></li>
            </ul>
            <ul><span>配种日期</span>
              <li><input value="" class="ui_input pzDateTime" readonly="readonly" name="" type="text" placeholder="请选择" /></li>
              <i></i>
            </ul>
            <ul><span>是否性控</span>
              <li>
                <select dir="rtl" class={style.ui_select}>
                  <option selected="selected">请选择</option>
                  <option>是</option>
                  <option>否</option>
                </select>
              </li>
              <i></i>
            </ul>
            <ul><span>配种员</span>
              <li>
                <select dir="rtl" class={style.ui_select}>
                  <option selected="selected">请选择</option>
                  <option>xxx</option>
                  <option>yyy</option>
                </select>
              </li>
              <i></i>
            </ul>
          </div>
          <div id="pp_w2" style="display:none;">
            <ul><span>未配原因</span>
              <li>
                <select dir="rtl" class="ui_select">
                  <option selected="selected">请选择</option>
                  <option>公牛不配合</option>
                  <option>母牛不乐意</option>
                  <option>主人心情差</option>
                </select>
              </li>
              <i></i>
            </ul>
          </div>
        </div>
        <div class={style.cows_n_down}>
          <Link href="/breedingManagement"><input class={style.ui_btn} value="保 存" /></Link>
        </div>
      </div>
    );
  }

界面是:

如何实现,选择 是,显示对应下半部分

选择否显示另外的部分:

react js option selected

javascript – React JSX: selecting "selected" on selected <select> option – Stack Overflow

JedWatson/react-select: A Select control built with and for React JS

貌似不错。

[Reactjs] 關於表單 « AndyYou’s Blog

表单(Forms) – React 中文文档

貌似原生的就已经支持了。

【总结】

然后后来通过:

import { h, Component } from ‘preact’;
import { Link } from ‘preact-router’;
import autoBind from ‘react-autobind’;
import { connect } from ‘preact-redux’;
import { bindActions } from ‘../../store/util’;
import reducer from ‘../../store/reducers’;
import * as actions from ‘../../store/actions’;
import style from ‘./style.less’;
@connect(reducer, bindActions(actions))
export default class BreedingProcess extends Component {
  state = {
    isBreeding : “-1",
    breedInfoDict : {
      "cow_code" : 120348,
      "cowshed" : "高产牛舍-05",
      "cur_alarm_time" : "06-08 13:43",
      "last_alarm_time" : "06-08 13:43"
    }
  };
  constructor(props) {
    super(props);
    autoBind(this);
    // this.fetchBreedingInfo();
    this.handleIsBreedingChange = this.handleIsBreedingChange.bind(this);
  }
  handleIsBreedingChange(event) {
    console.log("handleIsBreedingChange");
    console.log(event);
    //console.log(event.target);
    console.log(event.target.value);
    this.setState({isBreeding: event.target.value});
  }
  render() {
    const { breedInfoDict } = this.state;
    return (
      <div class={style.content_div}>
        <div class={style.cows_n_box}>
          <ul><span>牛号</span>
            <li><p>{breedInfoDict.cow_code}</p></li>
          </ul>
          <ul><span>牛舍</span>
            <li><p>{breedInfoDict.cowshed}</p></li>
          </ul>
          <ul><span>本次预警</span>
            <li><p>{breedInfoDict.cur_alarm_time}</p></li>
          </ul>
          <ul><span>上次预警</span>
            <li><p>{breedInfoDict.last_alarm_time}</p></li>
          </ul>
          <ul><span>是否配种</span>
            <li>
              <select value={this.state.isBreeding} dir="rtl" class={style.ui_select} onChange={this.handleIsBreedingChange}>
                <option value="-1">请选择</option>
                <option value="0">否</option>
                <option value="1">是</option>
              </select>
            </li>
            <i/>
          </ul>
          { this.showBreedingFields() }
        </div>
        <div class={style.cows_n_down}>
          <Link href="/breedingManagement"><input class={style.ui_btn} value="保 存" /></Link>
        </div>
      </div>
    );
  }
  showBreedingFields() {
    const {
      isBreeding
    } = this.state;
    console.log(isBreeding);
    if (isBreeding === "0" ) {
      return this.showNotBreedingFields();
    } else if (isBreeding === "1") {
      return this.showIsBreedingFields();
    }
  }
  showNotBreedingFields() {
    return (
      <div id="pp_w2">
        <ul><span>未配原因</span>
          <li>
            <select dir="rtl" class={style.ui_select}>
              <option selected="selected">请选择</option>
              <option>公牛不配合</option>
              <option>母牛不乐意</option>
              <option>主人心情差</option>
            </select>
          </li>
          <i/>
        </ul>
      </div>
    );
  }
  showIsBreedingFields() {
    return (
      <div id="pp_w1">
        <ul><span>与配公牛</span>
          <li><input value="" class={style.ui_input} name="" type="text" placeholder="请填写" /></li>
        </ul>
        <ul><span>精液数量</span>
          <li><input value="" class={style.ui_input} name="" type="text" placeholder="请填写" /></li>
        </ul>
        <ul><span>配种日期</span>
          <li><input value="" class="ui_input pzDateTime" readonly="readonly" name="" type="text" placeholder="请选择" /></li>
          <i/>
        </ul>
        <ul><span>是否性控</span>
          <li>
            <select dir="rtl" class={style.ui_select}>
              <option selected="selected">请选择</option>
              <option>是</option>
              <option>否</option>
            </select>
          </li>
          <i/>
        </ul>
        <ul><span>配种员</span>
          <li>
            <select dir="rtl" class={style.ui_select}>
              <option selected="selected">请选择</option>
              <option>xxxx</option>
              <option>yyy</option>
            </select>
          </li>
          <i/>
        </ul>
      </div>
    );
  }
}

就可以实现对应的效果了:

转载请注明:在路上 » 【已解决】ReactJS中如何根据option选项的选择决定条件渲染内容

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.111 seconds, using 20.72MB memory