gpt4 book ai didi

react-redux - React Redux Material-UI 自动完成

转载 作者:行者123 更新时间:2023-12-04 01:35:46 25 4
gpt4 key购买 nike

在使用 redux-form 时,我正在努力从 Material-ui 自动完成中获取值(value)。有人解决了吗?我正在使用 material-ui Autocomplete https://material-ui.com/components/autocomplete/ 中的确切示例我能够看到列表选项并在单击它两次后填充它,但我无法提取实际值,而是返回 ({ title : 0 }) 而不是值。

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { Field, reduxForm } from "redux-form";
import { connect } from "react-redux";

class Form extends React.Component {
onSubmit = formValues => {
console.log(formValues);
};

renderTextField = ({
label,
input,
meta: { touched, invalid, error },
...custom
}) => (
<Autocomplete
label={label}
options={this.props.movies}
placeholder={label}
getOptionLabel={option => option.title}
onChange={input.onChange}
{...input}
{...custom}
renderInput={params => (
<TextField {...params} label={label} variant="outlined" fullWidth />
)}
/>
);

render() {
const { handleSubmit } = this.props;

return (
<div>
<form onSubmit={handleSubmit(this.onSubmit)}>
<Field
name="propertySelector"
component={this.renderTextField}
label="Select Property"
type="text"
/>
</form>
</div>
);
}
}
const mapStateToProps = state => {
console.log(state);
return {
movies: [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 },
{ title: "Schindler's List", year: 1993 }
]
};
};

Form = reduxForm({
form: "auto_complete"
});

export default connect(mapStateToProps, null)(Form);

最佳答案

通过将 (event, value) 传递给 onChange Prop 来解决。

onChange={(event, value) => console.log(value)}

来自文档;

Callback fired when the value changes.

Signature:
function(event: object, value: T) => void
event: The event source of the callback.
value: null

关于react-redux - React Redux Material-UI 自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59657221/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com