【发布时间】：2021-09-28 03:23:48
【问题描述】：
我是 React 新手。 为了将 CpyMasterID（MySql 键）分配给用户，我正在使用 React Dropdown Select。我可以让它显示公司密钥列表（来自 MySQL 数据库）。
我需要它做的是显示指定公司的公司名称（如果 userscpymasterId 不为空），如果选择了公司名称，则返回关联的 cpymasterid。 Bottom of CreateUserSmallComponent Rendering
这是我现有的代码。
import React, { Component } from 'react'
import UserService from '../Services/UserService';
import CpyMasterService from '../Services/CpyMasterService';
class CreateUserSmallComponent extends Component {
constructor(props) {
super(props)
this.state = {
isLoading:true,
isReadOnly:false,
userId: this.props.match.params.userId,
usersfirstName: '',
userslastName: '',
userscpymasterId: '',
cpymaster: []
}
this.saveOrUpdateUser = this.saveOrUpdateUser.bind(this);
}
componentDidMount(){
CpyMasterService.getCpyMaster().then((res) => {
this.setState({ cpymaster: res.data});
});
if(this.state.userId === '_add'){
return
}else{
UserService.getUserById(this.state.userId).then( (res) =>{
let user = res.data;
this.setState({isLoading:false});
this.setState({usersfirstName: user.usersfirstName,
userslastName: user.userslastName,
userscpymasterId: user.userscpymasterId
});
});
}
}
saveOrUpdateUser = (e) => {
e.preventDefault();
let user = {usersfirstName: this.state.usersfirstName,
userslastName: this.state.userslastName,
userscpymasterId: this.state.userscpymasterId
};
if(this.state.userId === '_add'){
UserService.createUser(user).then(res =>{
this.props.history.push('/users');
});
}else{
UserService.updateUser(user, this.state.userId).then( res => {
this.props.history.push('/users');
});
}
}
changeFirstNameHandler= (event) => {
this.setState({usersfirstName: event.target.value});
}
changeLastNameHandler= (event) => {
this.setState({userslastName: event.target.value});
}
changeUsersCpyMasterIdHandler= (event) => {
this.setState({userscpymasterId: event.target.value});
}
cancel(){
this.props.history.push('/users');
}
getTitle(){
if(this.state.userId === '_add'){
return <h3 className="text-center">Add User</h3>
}else{
return <h3 className="text-center">Update User</h3>
}
}
render() {
return (
<div>
{this.state.isLoading &&
<h4>Getting Data....</h4>
}
<br></br>
<div className = "container">
<div className = "row">
<div className = "card col-md-6 offset-md-3 offset-md-3">
{
this.getTitle()
}
<div className = "card-body">
<form>
<div className = "form-group">
<label> First Name: </label>
<input placeholder="First Name" name="usersfirstName" className="form-control"
readOnly = {this.state.isReadOnly} value={this.state.usersfirstName} onChange={this.changeFirstNameHandler}/>
</div>
<div className = "form-group">
<label> Last Name: </label>
<input placeholder="Last Name" name="userslastName" className="form-control"
readOnly = {this.state.isReadOnly} value={this.state.userslastName} onChange={this.changeLastNameHandler}/>
</div>
<div>
<select>
<option selected disabled = "true" > -- Select CpyMaster -- </option>
{
this.state.cpymaster.map((x,y)=> (<option key={x}>{y}</option>))
}
</select>
</div>
<button className="btn btn-success" disabled={this.state.isReadOnly} onClick={this.saveOrUpdateUser}>Save</button>
<button className="btn btn-danger" onClick={this.cancel.bind(this)} style={{marginLeft: "10px"}}>Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default CreateUserSmallComponent
感谢大家的意见，帮助我在这方面取得进展。
公司主格式
public class CpyMaster {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private long cpymasterid;
@Column(name = "cpymastername")
private String cpymasterName;
@Column(name = "cpymasteraddress1")
private String cpymasterAddress1;
@Column(name = "cpymasteraddress2")
private String cpymasterAddress2;
@Column(name = "cpymastercity")
private String cpymasterCity;
@Column(name = "cpymasterzip")
private String cpymasterZip;
@Column(name = "cpymasterdocumentfolder")
private String cpymasterdocumentFolder;
@Column(name = "cpymastercreated")
private String cpymasterCreated;
@Column(name = "cpymasterupdated")
private String cpymasterUpdated;
@Column(name = "states_statesid")
private String states_statesId;
public long getCpymasterid() {
return cpymasterid;
}
【问题讨论】：
-
cpymaster 的结构是什么？看起来您的代码非常接近，您只需要在选项标签中使用适当的变量（例如“value =”）。
-
感谢您的关注。这是 cpy 大师：添加到原始帖子:-)
-
感谢您的关注，希望您能提供帮助。这是 cpy 大师：添加到原始帖子 :-) – @talfreds
-
我实际上是指您分配给 cpymaster 状态值的“res.data”的结构。
-
好吧，我在里面有一些代码并将其注释掉。当前代码是：''' componentDidMount(){ CpyMasterService.getCpyMaster().then((res) => { this.setState({ cpymaster: res.data}); }); ''' 如果我将其替换为： ''' CpyMasterService.getCpyMaster().then((res) => { let cpymaster = res.data; this.setState({ cpymasterId: cpymaster.cpymasterId, cpymasterName: cpymaster.cpymasterName } ); }); ''' 对访问数据有帮助吗？听起来会有所帮助。 @talfreds
标签： mysql reactjs select dropdown