无法将值从下拉传递给componentDidMount函数



在下面的代码中,我试图从实现的下拉选择中分配ParentId{ ParentId: 'ou-wmno-yeeol4ok' }中的值,而不是将其硬编码,但我不知道如何在componentDidMount()函数中传递this.state.value。有趣的是,如果我试图做这样的事情{ ParentId: this.state.value }它不工作。有人能帮我看看吗?谢谢。

import React, {Component} from 'react'
import axios from '../../axios'
export default class users extends Component {
constructor(props) {
super(props);
this.state = {
Users: [],
value: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}

handleSubmit(event) {
//alert('Your favorite flavor is: ' + this.state.value);
console.log( this.state.value);
event.preventDefault();
} 


componentDidMount(){
axios
.post(`/`, { ParentId: 'ou-wmno-yeeol4ok' })
.then(res => {
const data = res.data
const valuesArray = JSON.parse(data)
console.log(valuesArray)
const users = valuesArray.Accounts.map(u =>
<tr key={u.Id}>  
<td>{u.Name}</td>
<td>{u.Arn}</td>
<td>{u.Id}</td>
<td>{u.Email}</td>
<td>{u.JoinedMethod}</td>
<td>{u.JoinedTimestamp}</td>
<td>{u.Status}</td>
</tr>
)
this.setState({
users
})
})
.catch((error) => {
console.log(error)
})

}

render() {
return (
<form onSubmit={this.handleSubmit}>
<div>
<h1 id='awsorg'>AWS Accounts in Organization</h1>
<div>
<label>
Select AWS Organization
<select id="dropdown" value={this.state.value} onChange={this.handleChange}>
<option value="test-1">test-1</option>
<option value="ou-wmno-yeeol4ok">Suspended</option>
<option value="test-3">test-3</option>
<option value="test-4">test-4</option>
</select>
<input type="submit" value="Submit" />
</label>
</div>
<table id='accounts'>
<tbody>
<tr>
<th>Name</th>
<th>Arn</th>
<th>id</th>
<th>Email</th>
<th>JoinedMethod</th>
<th>JoinedTimestamp</th>
<th>Status</th>
</tr>
{this.state.users}
</tbody>
</table>
</div>
</form>
)
}
}
{ ParentId: 'this.state.value' }

不工作,因为this.state.value被这个字符'

包围试试这个

componentDidMount(){
let parentId = this.state.value
axios.post(`/`, { ParentId: parentId  })
... rest of the code ..

相关内容

  • 没有找到相关文章

最新更新