У меня есть таблица с полем с именем isAdmin на сервере.Поле isAdmin имеет значение true или false для разных пользователей.
Ниже приведен мой код реакции / избыточности, который отображает этот интерфейс с использованием имен полей, где это применимо:
import React from 'react'
import {connect} from 'react-redux'
import {getUsers} from '../store/allUsers' // toDate
import {updateUserThunk, fetchSingleUser} from '../store/singleUser'
// Status Filter import BeerFilter from './BeerFilter'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import {UncontrolledCollapse} from 'reactstrap'
export class AllUsers extends React.Component {
constructor(props) {
super(props)
this.state = {
showForm: false,
isAdmin: ''
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
componentDidMount() {
try {
this.props.fetchInitialUsers()
} catch (error) {
console.error(error)
}
}
clickHandlerOne() {
let hidden = this.state.showForm
this.setState({
showForm: !hidden
})
}
handleChange(event) {
//console.log('event.target', event.target)
this.setState({
[event.target.name]: event.target.value
})
}
async handleSubmit(userId) {
event.preventDefault()
const updatedUser = {
id: userId,
isAdmin: this.state.isAdmin
}
// console.log('UPDATE USER', updatedUser)
await this.props.updateUserThunk(updatedUser)
this.props.fetchInitialUsers()
}
render() {
const users = this.props.users
// console.log('PROPS', this.props)
console.log('USERS', this.props.users)
return (
<div>
{/* <div className="options">
<select onChange={this.handleChange}>
<option value="">Sort By...</option>
<option value="priceHighToLow">Price (high to low)</option>
<option value="priceLowToHigh">Price (low to high)</option>
<option value="name">Name</option>
</select>
<BeerFilter />
</div> */}
<div className="flex-cards">
{users.map(user => (
<Card style={{width: '18rem'}} key={user.id}>
<Card.Body>
<Card.Title>User Id: {user.id}</Card.Title>
<Card.Text>
<div>
<ul>
<li>
<div className="highlight">
<img src={user.imageUrl} />
</div>
<div className="details">
<p>Username: {user.username}</p>
<p>User Email: {user.email}</p>
<p>Admin Status: {user.isAdmin}</p>
<p>
Created Date:{' '}
{new Intl.DateTimeFormat('en-GB', {
month: 'short',
day: '2-digit',
year: 'numeric'
}).format(new Date(user.createdAt))}
</p>
<p />
<Button
id={`user${user.id}`}
onClick={() => {
this.clickHandlerOne()
}}
variant="danger"
>
Admin Status Toggle
</Button>
<UncontrolledCollapse toggler={`#user${user.id}`}>
{/* {this.state.showForm && (
<UpdateUserStatus userId={user.id} />
)} */}
<form onSubmit={() => this.handleSubmit(user.id)}>
<div>
<span>
<select
name="isAdmin"
value={
typeof user.isAdmin === 'string'
? this.state.isAdmin
: user.isAdmin
}
onChange={this.handleChange}
>
<option value="true">true</option>
<option value="false">false</option>
</select>
</span>
<p />
<span>
<p>
{/* */}
<button type="submit">Submit</button>
</p>
</span>
{/* delete thunk
<span>
<p>
<button type="button">Delete</button>
</p>
</span>
*/}
</div>
</form>
</UncontrolledCollapse>
</div>
</li>
</ul>
</div>
</Card.Text>
</Card.Body>
</Card>
))}
</div>
</div>
)
}
}
const mapStateToProps = state => {
return {
users: state.allUsers
}
}
const mapDispatchToProps = dispatch => {
return {
loadSingleUser: id => dispatch(fetchSingleUser(id)),
updateUserThunk: updatedUser => dispatch(updateUserThunk(updatedUser)),
//getSortedBeers: (sortBy, beers) => dispatch(sortBeers(sortBy, beers)),
fetchInitialUsers: () => dispatch(getUsers())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AllUsers)
У меня есть две проблемы при попытке визуализации поля isAdmin.Во-первых, значение true или false, связанное с полем isAdmin, никогда не обрабатывается.
См. Рисунок:
Вопрос 1. Как получить значение поля isAdmin для рендеринга?
Мой второй вопрос связан с обновлением моего поля isAdmin и отображением обновления на веб-странице.
После того, как я нажму на красную кнопку переключения, у меня появится выпадающее поле, где я могу выбрать true или false.По умолчанию используется значение «true» или «false» из базы данных.Но я не могу выбрать другое раскрывающееся значение.Это остается застрявшим на выборе по умолчанию.
Например, раскрывающийся список по умолчанию имеет значение false.Когда я открываю выпадающий список и выбираю истину, он не выбирает истину ... он по-прежнему имеет ложь.
Вопрос 2: Что я делаю не так?
Конечная цель состоит в том, чтобы выбрать в раскрывающемся списке значение, противоположное значениям по умолчанию, и обновить мой статус администратора.в выбранный статус.