我有以下代码:
import React from 'react';
import url from '../url';
const LugarModal = ({rutas,lugars,onChange}) =>(
<div className="modal fade modal_ruta" role="dialog" aria-hidden="true">
<div className="modal-dialog modal-sm">
<div className="modal-content">
<div className="modal-header" >
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span>
</button>
<h4 className="modal-title" id="myModalLabel2"><b>Agregar Rutas </b></h4>
</div>
<div className="modal-body" >
<form action="">
<div className="clearfix"></div>
<div className="x_content">
<div className="row">
<div className="col-md-3 col-sm-3 col-xs-12 form-group has-feedback" >
<label>Lugar de Origen:</label>
</div>
<div className="col-md-9 col-sm-9 col-xs-12 form-group has-feedback">
<select onChange={onChange} value={rutas.lugar_origen_id} required readOnly className="form-control" name="lugar_origen_id" id="lugar_origen_id">
{
lugars.map((lugar)=>(
<option key={lugar.id} value={lugar.id}>{lugar.nombre}, {lugar.departamento}</option>
))
}
</select>
<span className="fa fa-random form-control-feedback right" aria-hidden="true"></span>
</div>
</div>
<div className="row">
<div className="col-md-3 col-sm-3 col-xs-12 form-group has-feedback" >
<label>Lugar Destino:</label>
</div>
<div className="col-md-9 col-sm-9 col-xs-12 form-group has-feedback">
<select onChange={onChange} value={rutas.lugar_destino_id} required className="form-control" name="lugar_destino_id" id="lugar_destino_id">
<option value="">Seleccion Un Lugar</option>
{
lugars.map((lugar)=>(
if(lugar.id != rutas.lugar_origen_id){
<option key={lugar.id} value={lugar.id}>{lugar.nombre}, {lugar.departamento}</option>
}
))
}
</select>
<span className="fa fa-refresh form-control-feedback right" aria-hidden="true"></span>
</div>
</div>
<div className="row">
<div className="col-md-3 col-sm-3 col-xs-12 form-group has-feedback" >
<label> Ruta:</label>
</div>
<div className="col-md-9 col-sm-9 col-xs-12 form-group has-feedback">
<input onChange={onChange} value={rutas.ruta} type="text" className="form-control" name="ruta" id="ruta" required placeholder="Camina1 | Camino2 | Camino3 | Camino4"/>
<span className="fa fa-tag form-control-feedback right" aria-hidden="true"></span>
</div>
</div>
<div className="row">
<div className="col-md-3 col-sm-3 col-xs-12 form-group has-feedback" >
<label> Distancia:</label>
</div>
<div className="col-md-9 col-sm-9 col-xs-12 form-group has-feedback">
<input onChange={onChange} value={rutas.distancia} type="text" className="form-control" name="distancia" id="distancia" required placeholder="30 km" />
<span className="fa fa-tag form-control-feedback right" aria-hidden="true"></span>
</div>
</div>
<div className="row">
<button type="submit" id="btn_submit" className="btn btn-success"><i className="fa fa-save"></i>Guardar</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
);
export default LugarModal;
我想要做的是,lugar_destino_id
只有不同的地方才会出现lugar_origen_id
,以验证他们在两个选择中没有选择相同的地方。
我的问题是我刚开始,react
我不知道该怎么做。具体代码是:
lugars.map((lugar)=>(
if(lugar.id != rutas.lugar_origen_id){
<option key={lugar.id} value={lugar.id}>{lugar.nombre}, {lugar.departamento}</option>
}
))
在使用之前
map
删除filter
你不想要的:它们是 Array 类的方法,它们不是 React 的一部分。我建议您查看Array API,因为它有许多您会经常使用的有趣方法。