Question

我正在收到所有处于状态的客户端列表的响应

this.state= {

clients: {
            "response": "SUCCESS",
            "totalClientUsers": 2,
            "users": [{
                "id": "5bae32e360dfee76e67e6b24",
                "username": "sivasai",
                "firstName": "siva",
                "lastName": "sai",
                "phone": "9878989098",
                "organizationName": "TCS",
            }, {
                "id": "5bb1ab9d60dfee130c22cdea",
                "username": "demo",
                "firstName": "test user",
                "lastName": "new",
                "phone": "9876567898",
                "organizationName": "Jp morgan",

            }]
        }

}

基于响应，我试图填充所有客户端username的列表

import React from 'react';
 import { Link } from 'react-router';
 import * as UserAction from '../../actions/userAction.jsx';
 import UserStore from '../../store/userstore.jsx';

class Company extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        clientName: '-1',
        singleUser: {
            user: {
                addressLine1: '',
                organizationName: '',
            }
        },

        clientslist: {
          users: [],
        }
    };
    this._userStoreChange = this._userStoreChange.bind(this);



}

  componentWillMount() {
    const details = UserStore._getSingleEnquiry();
    if (Object.keys(details).length) {
        this.setState({ ...details.enquiry, old: true });
    }
    UserStore.on('change', this._userStoreChange);
  }

  componentWillUnmount() {
    UserStore.removeListener('change', this._userStoreChange);
  }

  componentDidMount() {
    UserAction._getClientsList();
  }

  _userStoreChange(type) {
    if (type == 'ClientsList') {
        let clientslist = UserStore._getClientsList() || {};
        this.setState({ clientslist });
    }
    if (type == 'SingleUser') {
        let singleUser = UserStore._getSingleUser() || {};
        this.setState({ singleUser });
    }
  }




handleClientChange(e) {

    this.setState({ clientName: e.target.value });
    let data = {
        id: e.target.value
    }

    UserAction._getSingleUserDetails(data);


}

createEnquiry() {
    let data = {
        id: this.state.old ? this.state.id : null,
        clientName: this.state.old ? this.state.clientName : this.state.singleUser && this.state.singleUser.user && this.state.singleUser.user.organizationName,
      }
    this.state.old ? UserAction._UpdateEnquiry(data) : UserAction._createEnquiryDetails(data)

}







render() {
    let clientslist = this.state.clientslist.users;

    return (
        <div>

            <button className="btn btn-primary btn-round btn-simple float-right hidden-xs m-l-10" onClick={this.createEnquiry.bind(this)}> {this.state.old ? 'Update' : 'Save'}</button>
           <div className="row">

                <div className="col-sm-4 col-6">
                    <h2 className="card-inside-title" > Client Name</h2>

                    <select className="c-select form-control " onChange={this.handleClientChange.bind(this)} value={this.state.clientName}>
                        <option value='-1' disabled>Select Client</option>
                            {clientslist.map((el) => <option name={el.username} id={el.id} value={el.id}>{el.username}</option>)}
                    </select>

                </div>
                <div className="col-md-4 col-6">

                    <h2 className="card-inside-title" >  Address</h2>
                    <div className="form-group">
                        <input type="text" className="form-control " placeholder="" name='' id="" value={this.state.singleUser.user.addressLine1} disabled />
                    </div>
                </div>

                <div className="col-md-4 col-6">

                    <h2 className="card-inside-title" >Email</h2>
                    <div className="form-group">
                        <input type="text" className="form-control " placeholder="" name='' id="" value={this.state.singleUser.user.email} disabled />
                    </div>
                </div>

                <div className="col-md-4 col-6">

                    <h2 className="card-inside-title" >Reg No.</h2>
                    <div className="form-group">
                        <input type="text" className="form-control " placeholder="" name='' id="" value={this.state.singleUser.user.registrationNumber} disabled />
                    </div>
                </div>


                <div className="col-md-4 col-6">
                    <h2 className="card-inside-title" >Organization Name</h2>
                    <div className="form-group">
                        <input type="text" className="form-control " placeholder="" name='' id="" value={this.state.singleUser.user.organizationName} disabled />
                    </div>
                </div>

                            </div>
                </div>

    )
  }
  }

export default Company;

在创建模式下使用上述名称后，我可以选择以下用户名现在我可以选择我想要的选项。但是在这里，在创建模式下，我正在请求中发送organizationName。

在编辑模式下，可以获取响应中的organizationName。基于应该填充选定的客户端，但是当响应中出现organizationName时，我无法填充选定的客户端。

Answer 1

至于我了解要显示的内容是在选择框中预先选择的值。为此，您可能需要在选择标记的value属性中传递this.state.clientId而不是this.state.clientName

<select 
   className="c-select form-control " 
   onChange= {this.handleClientChange.bind(this)} 
   value={this.state.clientId}>
<option value='-1' disabled>Select Client</option>

{clientslist.map((el) => 
    <option name={el.username} id={el.id} value={el.id}> 
        {el.username}
    </option>)}
</select>

还要确保已在您的州内选择了客户端ID

this.state = {
    clientId: '43953fuse9fuwef'
}

Answer 2

在呈现编辑页面时，找到该选项，然后在要预先选择的选项中设置属性selected。

像这样：<option selected="selected">asdasd</option>

添加更多详细信息：您可以使用if进行有条件的渲染。我不记得确切的JSX语法，但是您可以执行以下操作：

clientslist.map((el) => {
if (this.state.clientName == el.username)
  <option seleted name={el.username} id={el.id} value={el.id}>{el.username}</option>
else
  <option name={el.username} id={el.id} value={el.id}>{el.username}</option>
}

如何在React中的选择标签中的编辑模式下填充值？

2 个答案: