[英]React: Can't select dropdown menu options after assigning value attribute to component's state
[英]Use a state with objects as options in dropdown menu : REACT
創建具有一些功能方面的虛擬網站。 為了澄清起見,我一周前開始學習React,所以請對您的回答感到滿意。 謝謝!
最初在App.js中創建了一個狀態,該狀態允許我添加和刪除客戶端。 (例如老舊的待辦事項清單)
現在,使用另一個可以“添加課程”的組件,我想要一個下拉選擇器,可以從另一個狀態中選擇一個現有客戶端作為我的選項。 到目前為止,我已經創建了所有需要輸入的內容,console.log()表明一切正常。 但是,我似乎無法將下拉選項顯示為現有客戶端,因此可以將課程添加為其他狀態。 為了澄清,我有兩個狀態,客戶和課程(與現有客戶)。
這是我的App.js
import React, { Component } from 'react'
import Clients from './components/Clients'
import AddClient from './components/AddClient'
import NavBar from './components/NavBar'
import AddLesson from './components/AddLesson'
class App extends Component {
state = {
clients : [
{id : 1 , name : 'bob', price : 30},
{id : 2 , name : 'mary', price : 40},
{id : 3 , name : 'greg', price : 45}
],
lessons : [
{id: null, name: '', time: null}
]
}
deleteClient = (id) => {
let clients = this.state.clients.filter(client => {
return client.id !== id
})
this.setState({
clients: clients
})
}
addClient = (newClient) => {
newClient.id = Math.random();
let clients = [...this.state.clients, newClient];
clients.sort((a, b) => a.name.localeCompare(b.name))
this.setState({
clients: clients,
})
}
addLesson = (newLesson) => {
newLesson.id = Math.random();
let lessons = [...this.state.lessons, newLesson];
this.setState({
lessons: lessons,
})
console.log(lessons)
}
render() {
return (
<div className="App">
<NavBar/>
<Clients clients={this.state.clients} deleteClient={this.deleteClient}/>
<AddClient addClient={this.addClient}/>
<AddLesson addLesson={this.addLesson}/>
</div>
);
}
}
export default App;
這是AddLesson.js
import React, {Component} from 'react'
class AddLesson extends Component {
state = {
lessons: [
{id : null, name: '', time: null}
]
}
handleChange = (e) => {
this.setState({
[e.target.id] : e.target.value
})
}
handleSubmit = (e) => {
e.preventDefault();
this.props.addLesson(this.state);
e.target.reset();
}
render() {
return (
<div className="text-center">
<h2>Add a lesson</h2>
<form onSubmit={this.handleSubmit}>
<select name="lesson_client">
<option>{this.props.clients}</option>
</select>
{/* <label htmlFor="name">Client Name: </label>
<input type="text" id="name" onChange={this.handleChange}/><br/>
<label htmlFor="time">Lesson Duration (in hours): </label>
<input type="text" id="time" onChange={this.handleChange}/><br/>
<button className="btn btn-primary">Add Client</button> */}
</form>
</div>
)
}
}
export default AddLesson
我嘗試不重載代碼,因此,如果我缺少某些內容,請告訴我,我將對其進行編輯。
您需要遍歷客戶端並渲染它們。
<select onChange={(e) => this.handleChange(e)} name="lesson_client">
{this.props.clients.map(client => <option key={client.id} value={client.price}>{client.name}</option>)}
</select>
您可以聽handleChange
讀取所選的值。 (注意:由於select標記上沒有id attr,因此我已將e.target.id
更改為e.target.name
)
handleChange = (e) => {
this.setState({
[e.target.name] : e.target.value
})
}
而且我還注意到您沒有將clients
傳遞給AddLesson
組件。 請通過它以使代碼正常工作。
<AddLesson clients={this.state.clients} addLesson={this.addLesson}/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.