[英]React: How to map select option value to a state key?
目前正在使用JS和React。 我想將值從所選選項映射到this.state.transcode_profile
。 不幸的是,我嘗試了與在input
標簽上使用的方法相同的方法。
這是代碼,我在做什么錯?
import React, { Component } from "react";
const ProfileList = ({profiles}) => (
<select name="transcode_profile"
id="transcode_profile"
onChange={this.onChange}>
<option value="-----">----</option>
{profiles.map(profile => <option value={profile.name}>{profile.name}</option>)}
</select>
);
const url = 'http://localhost:8000/api/tasks/';
class Submit_job extends Component {
constructor(){
super();
this.state = {
"profiles": [],
"material_id": null,
"transcode_profile": null,
"start_date": null,
"end_date": null,
};
};
componentDidMount(){
fetch("http://localhost:8000/api/profiles/")
.then(response => response.json())
.then(response => this.setState({ profiles: response}))
}
onChange = (e) => {
// Because we named the inputs to match their corresponding values in state, it's
// super easy to update the state
const state = this.state;
state[e.target.name] = e.target.value;
this.setState(state);
};
handleChange(e){
this.setState({selectValue:e.target.value});
};
postData = (e) => {
e.preventDefault();
// Default options are marked with *
return fetch(url, {
body: JSON.stringify({status: 'submitted',
video_data: {material_id: this.state.material_id},
profile_data: {name: this.state.transcode_profile },
start: this.state.start_date,
end: this.state.end_date,
user: 'Foobar'}), // must match 'Content-Type' header
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, same-origin, *omit
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // *manual, follow, error
referrer: 'no-referrer', // *client, no-referrer
})
.then(response => response.json()) // parses response to JSON
};
render() {
return (
<div>
<h2>Submit Job</h2>
<form onSubmit={this.postData}>
<label htmlFor="material_d">Material ID:</label>
<input id="material_id"
type="text"
name="material_id"
onChange={this.onChange}
required/>
<br/>
<label htmlFor={"transcode_profile"}>Transcode Profile:</label>
<ProfileList profiles={this.state.profiles}/>
<br/>
<label htmlFor="start_date">Start Date:</label>
<input type="text"
name="start_date"
id="start_date"
onChange={this.onChange}
required/>
<br/>
<label htmlFor="end_data">End Date:</label>
<input type="text"
name="end_date"
id="end_date"
onChange={this.onChange}
required/>
<br/>
<button>Submit</button>
</form>
</div>
);
}
}
export default Submit_job;
編輯:這就是我如何使其工作。
import React, { Component } from "react";
const ProfileList = ({onChange, profiles, value}) => (
<select name="transcode_profile"
id="transcode_profile"
onChange={onChange}
value={value}>
<option value="-----">----</option>
{profiles.map(profile => <option value={profile.name}>{profile.name}</option>)}
</select>
);
const url = 'http://localhost:8000/api/tasks/';
class Submit_job extends Component {
constructor(){
super();
this.state = {
"profiles": [],
"material_id": null,
"transcode_profile": null,
"start_date": null,
"end_date": null,
};
};
componentDidMount(){
fetch("http://localhost:8000/api/profiles/")
.then(response => response.json())
.then(response => this.setState({ profiles: response}))
}
onChange = (e) => {
// Because we named the inputs to match their corresponding values in state, it's
// super easy to update the state
const state = this.state;
state[e.target.name] = e.target.value;
this.setState(state);
};
postData = (e) => {
e.preventDefault();
// Default options are marked with *
return fetch(url, {
body: JSON.stringify({status: 'submitted',
video_data: {material_id: this.state.material_id},
profile_data: {name: this.state.transcode_profile },
start: this.state.start_date,
end: this.state.end_date,
user: 'Lewis'}), // must match 'Content-Type' header
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, same-origin, *omit
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // *manual, follow, error
referrer: 'no-referrer', // *client, no-referrer
})
.then(response => response.json()) // parses response to JSON
};
render() {
return (
<div>
<h2>Submit Job</h2>
<form onSubmit={this.postData}>
<label htmlFor="material_d">Material ID:</label>
<input id="material_id"
type="text"
name="material_id"
onChange={this.onChange}
required/>
<br/>
<label htmlFor={"transcode_profile"}>Transcode Profile:</label>
<ProfileList
onChange={this.onChange}
profiles={this.state.profiles}
/>
<br/>
<label htmlFor="start_date">Start Date:</label>
<input type="text"
name="start_date"
id="start_date"
onChange={this.onChange}
required/>
<br/>
<label htmlFor="end_data">End Date:</label>
<input type="text"
name="end_date"
id="end_date"
onChange={this.onChange}
required/>
<br/>
<button>Submit</button>
</form>
</div>
);
}
}
export default Submit_job;
選擇也應傳遞值,以便知道選擇了哪個選項:
const ProfileList = ({ onChange, profiles, value }) => (
<select
name="transcode_profile"
id="transcode_profile"
onChange={onChange}
value={value}
>
<option value="-----">----</option>
{profiles.map(profile => <option value={profile.name}>{profile.name}</option>)}
</select>
);
然后,在渲染ProfileList時,我們應該傳遞selectValue狀態以及handleChange回調。
<ProfileList
onChange={this.handleChange}
profiles={this.state.profiles}
value={this.state.selectValue}
/>
您還應該在構造函數中為selectValue設置默認狀態。
constructor(){
super();
this.state = {
"profiles": [],
"material_id": null,
"transcode_profile": null,
"start_date": null,
"end_date": null,
"selectValue": "-----"
};
}
如果您尚未閱讀表格上的React文檔,我會推薦它們: https : //reactjs.org/docs/forms.html#the-select-tag
handleChange = (e, {value}) => {
this.setState({selectValue:value});
};
這也可以寫成
handleChange = (e, data) => {
this.setState({selectValue:data.value});
};
對於某些元素,Semantic-UI-React要求您首先提供事件,但還需要提供包含所需數據的第二個參數。 這是一個眾所周知的限制。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.