Question

我有多个位置的位置列表。存在一个“添加所有按钮”。当我单击该按钮时，所有位置将被添加到另一个阵列。现在，添加操作可以正常工作。但是我需要在单击操作后隐藏“添加所有按钮”。

我为此创建了动作和减速器。到目前为止，我已经完成了。

操作代码：（适用于所有位置和单个位置）

export const addAllLocation = () =>({
    type : ALL_LOCATION
  });

export const addLocation = mruCode =>({
  type: ADD_LOCATION,
  payload:mruCode
});

减速器代码：（用于所有位置和单个位置）

case 'ALL_LOCATION':
            return{
                ...state,
                conLocations:[...state.location]
            }

case 'ADD_LOCATION':
         let addedLoc = state.location.find(obj=>(obj.mruCode === action.payload))
               return{
                   ...state,
                   conLocations: [...state.conLocations,addedLoc]
               };

公司代码：

export class NewLocationPanel extends React.Component{
    constructor(props){
        super(props);
        this.state={
               open:false,
               conLocations:[]
               //configuredList:[]
        };
       this.configLocation = this.configLocation.bind(this);
        this.togglePanel = this.togglePanel.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.allLocations = this.allLocations.bind(this);
        this.clearall = this.clearall.bind(this);
        this.getLocationData = this.getLocationData.bind(this);
    }
    togglePanel (e){
        this.setState({open : !this.state.open});
    }
    handleClick (mruCode){
      this.props.addLocation(mruCode)
     }
     allLocations (){
       this.props.addAllLocation()
    }
    clearall (){
        this.props.removeAllLocation()
      }

    componentDidMount() {
        this.props.loadData();
      }

    componentDidUpdate(prevProps){
        if ((prevProps.jobId != this.props.jobId || prevProps.jobDetailJson != this.props.jobDetailJson) && this.props.jobDetailJson != undefined) {
            this.configLocation(this.props.jobDetailJson);
        }

    }

    configLocation(jobDetailJson){
        let conLocations = jobDetailJson.locations.locationDetails;
        this.setState({conLocations});
        console.log(conLocations);
    }

    render(){
        //const{configuredList} = this.state;
        const _labels = store.getLabels();
        let collapsedToggle = this.props.open ? 'collapsed' : ''
        return(
            <div className="panel panel-default">
            <div className="panel-heading" onClick={(e)=>this.togglePanel(e)}>
              <div className="row">
              <div className="col-xs-12 col-sm-8 col-md-6 col-lg-6 panelHeadingLabel">
                     <span>{this.props.title}</span>
                     </div>
                        <div className="pull-right">
                        <span className="defaultHeaderTextColor">{this.state.conLocations.map((loc,index)=><span key={index}>{loc.mruCode} - {_labels[loc.division]} - {loc.country}</span>)}
                           <span onClick={(e)=>this.togglePanel(e)} className={this.state.open ? "collapse-chevronn" : "collapse-chevron"} aria-hidden="true"></span>
                   </span>
                    </div>
                </div>
           </div>
              {this.state.open?(
                        <div className="panel-body">
                             <div className="row grid-divider">
                             <div className="col-sm-6">
                             <div className="col-padding"><div className="pos-div"><h3>Locations List</h3><button className="allLargeBtn" onClick={()=>{this.allLocations()}}>**Add all locations**</button></div><hr/>
                             {this.props.location.map((item,index)=>(
                             <div key={index}><div><b>{item.mruCode} - {_labels[item.division]} - {item.country}</b>{!this.props.conLocations.find(item2 => item.mruCode === item2.mruCode)&&(<div className="pull-right jd"><button className="call-to-action" onClick={()=>{this.handleClick(item.mruCode)}}>Add Location</button></div>)}<hr/></div></div>))}
                            </div>
                             </div> 
                                  <div className="col-sm-6">
                                  <div className="col-padding">
                                  <div className="pos-div"><h3>Configured Location</h3><button className="allLargeBtn" onClick={()=>{this.clearall()}}>Remove all location</button></div><hr/>
                                   <div>{this.state.conLocations.map((locc,index)=><table className="table" key={index}><tbody><tr><td><b>{locc.mruCode} - {_labels[locc.division]} - {locc.country}</b></td><td className="text-right"><img alt="DeleteIcon" onClick={()=>this.handleRemove(loct.mruCode)}className="deleteIconStyle" src="img/delete_large_active.png" /></td></tr></tbody></table>)}</div>
                                   <div><ConfiguredLocation/></div>
                                   </div>
                                  </div>
                                  </div> 
                    </div>):null}
            </div>

        );
    }
}

const mapStateToProps = state =>{
    return{
        location:state.locationRed.location,
        conLocations:state.locationRed.conLocations
    };
};

const mapDispatchToProps = (dispatch) => {
    return{
        loadData:()=>{dispatch(loadData())},
        addLocation:(mruCode)=>{dispatch(addLocation(mruCode))},
        addAllLocation:() =>{dispatch(addAllLocation())},
        removeAllLocation: () =>{dispatch(removeAllLocation())}
    }
}


export default connect(mapStateToProps,mapDispatchToProps,null,{withRef:true})(NewLocationPanel);

全部添加按钮单击后将不可见。如何将mruCode映射到该onClick操作中，以便基于此我可以隐藏按钮

Answer 1

您可以执行以下操作：

Front End --> Makes HTTP request --> API

API --> RPC communication --> Node

Node --> Runs Contract and throws TransactionVerificationException

Node --> RPC communication (Sends error back) --> API 

API --> Sends a custom message back --> Front End 

Front End --> Displays: "Invalid Email Address"

通过将其添加到按钮上，每次状态改变并重新渲染时，此值将在无和阻止之间改变。

类似于以下内容：

style={{ display: this.props.locations.length === this.props.conLocations.length ? "none" : "block" }}

Answer 2

您还可以有条件地渲染该按钮，就像处理this.state.opened和public void onSuccess(List<FirebaseVisionFace> faces) { // Task completed successfully // ... Log.d("Success: ", "success"); for (FirebaseVisionFace face : faces) { Rect bounds = face.getBoundingBox(); float rotY = face.getHeadEulerAngleY(); // Head is rotated to the right rotY degrees float rotZ = face.getHeadEulerAngleZ(); // Head is tilted sideways rotZ degrees Log.d("rotY: ", ""+rotY); Log.d("rotZ: ", ""+rotZ); // If landmark detection was enabled (mouth, ears, eyes, cheeks, and // nose available): FirebaseVisionFaceLandmark leftEar = face.getLandmark(FirebaseVisionFaceLandmark.LEFT_EAR); if (leftEar != null) { FirebaseVisionPoint leftEarPos = leftEar.getPosition(); } // If contour detection was enabled: List<FirebaseVisionPoint> leftEyeContour = face.getContour(FirebaseVisionFaceContour.LEFT_EYE).getPoints(); List<FirebaseVisionPoint> upperLipBottomContour = face.getContour(FirebaseVisionFaceContour.UPPER_LIP_BOTTOM).getPoints(); // If classification was enabled: if (face.getSmilingProbability() != FirebaseVisionFace.UNCOMPUTED_PROBABILITY) { float smileProb = face.getSmilingProbability(); } if (face.getRightEyeOpenProbability() != FirebaseVisionFace.UNCOMPUTED_PROBABILITY) { float rightEyeOpenProb = face.getRightEyeOpenProbability(); } // If face tracking was enabled: if (face.getTrackingId() != FirebaseVisionFace.INVALID_ID) { int id = face.getTrackingId(); } } }一样。

将所有项目添加到数组-redux

2 个答案: