React:在select中保存映射
React:在select中保存映射
提问于 2018-06-03 06:06:34
请告诉我如何保存option的选定值，在我的select中只保存第一个值(即One).How将选定值保存在select中
下面是代码(这是final-form)：
export const SelectFilter = props => {
const { onFilterChange, filterOptions } = props;
return (
<Form
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="section">Select:</label>
<Field
id="section"
name="section"
component="select"
onChange={e => onFilterChange(e)}
defaultValue={filterOptions.section}
>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</Field>
</div>
</form>
)}
/>
);
};回答 3
Stack Overflow用户
发布于 2018-06-03 06:19:10
下面是我通常如何处理react中的所有表单。这将允许它可重用，因为它允许您传递提交功能:D如果您确实想要传递onChange功能，那么您也可以传递它
class GalleryFilter extends React.Component {
constructor(props) {
super(props);
this.state = {
currentValue: "one"
};
this.onChange = this.onChange.bind(this);
this.submit = this.submit.bind(this);
}
onChange(e) {
e.preventDefault();
let {
value
} = e.target;
this.setState({
currentValue: value
});
}
submit(e) {
e.preventDefault();
this.props.Submit(this.state.currentValue);
}
render() {
return ( <
form onSubmit = {
this.submit
} >
<
div >
<
label htmlFor = "section" > Select: < /label> <
select id = "section"
name = "section"
component = "select"
onChange = {
this.onChange
}
value = {
this.state.currentValue
} >
<
option value = "one" > One < /option> <
option value = "two" > Two < /option> <
option value = "three" > Three < /option> <
/select> <
/div> <
/form>
);
}
}
Stack Overflow用户
发布于 2018-06-03 06:46:44
这应该是同样的工作方式。
export const GalleryFilter = props => {
const { onFilterChange, filterOptions } = props;
var currentSelection = "one";
function onChange(e)
{
e.preventDefault();
let {value} = e.target;
currentSelection = value;
onFilterChange(e);
}
return (
<Form
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="section">Select:</label>
<Field
id="section"
name="section"
component="select"
onChange={onChange}
value={currentSelection}
>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</Field>
</div>
</form>
)}
/>
);
};
Stack Overflow用户
发布于 2018-06-03 18:24:38
你误解了React最终形式的要点。看起来您正在尝试跟踪在state中手动选择的值，但这正是React Final Form为您做的事情。
如果想要查看select中当前选择的值，可以查看<Form>给出的属性中的values.section。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50661549
复制相关文章
相似问题
腾讯云开发者
