我在用react-select
。当我从select中选择一个确定的值时,我得到了下一个问题
TypeError:无法读取未定义的属性值
另外,从还原器todoList
获取的值没有显示出来,我看不到它们。
这是我的密码:
import Select from "react-select";
import "./styles.css";
import { searchTodos } from "../../actions/ServiceActions";
class SelectedTodo extends Component {
constructor(props) {
super(props);
this.state = {
selectedTodo: ""
};
this.handleChange = this.handleChange.bind(this);
}
bringTodos = () => {
//WHEN I'M EXECUTING THESE CODE LINES I CAN'T SEE TODOS VALUES
return this.props.todoList.map(todo => {
return (
<option key={todo._id} value={todo._id}>
{todo.name}
</option>
);
});
};
handleChange = e => {
this.setState({ selectedTodo: e.target.value });
};
componentDidMount() {
this.props.searchTodos();
}
render() {
const { loading } = this.props;
if (loading) {
return <span>...Loading</span>;
}
return (
<Select
className="form-container"
classNamePrefix="react-select"
placeholder="Please, insert a todo"
value={this.state.selectedTodo}
onChange={this.handleChange}
options={this.bringTodos()}
/>
);
}
}
function mapState(state) {
return {
todoList: state.todosDs.todoList
};
}
const actions = {
searchTodos
};
SelectedTodo = connect(
mapState,
actions
)(SelectedTodo);
export default SelectedTodo;
预期的行为是下拉的,显示todo,当我选择todo值时,我不会出错。
TypeError:无法读取未定义
的属性值
发布于 2020-03-02 12:42:48
包react-select
直接返回具有以下值的json
{label:"ABC", value:"abc"}
改变这个
handleChange = (e) =>{
this.setState({selectedTodo: e.target.value});
}
到这个
handleChange = (e) =>{
this.setState({selectedTodo: e});
}
发布于 2020-03-02 12:38:10
我认为作为react select的文档
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
this.handleChange将直接返回所选选项,而不是事件对象。
handleChange = selectedOption => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
};
我认为您也不需要绑定handleChange方法。
https://stackoverflow.com/questions/60488902
复制相似问题