使用 react-select 我有下一个问题:无法读取未定义的 属性 'value'
Using react-select I've got next issue: Cannot read property 'value' of undefined
我正在使用 react-select
。当我 select 从 select 得到一个确定值时,我有下一期
TypeError: Cannot read property 'value' of undefined
此外,从 reducer 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;
预期的行为是下拉列表显示待办事项,当我select输入待办事项值时我没有收到错误
TypeError: Cannot read property 'value' of undefined
我认为正如 react-select 的文档所说
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
this.handleChange 将直接 return selected 选项而不是事件对象。
handleChange = selectedOption => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
};
而且我认为您也不需要绑定 handleChange 方法。
包react-select
直接returns有值
的json
{label:"ABC", value:"abc"}
改变这个
handleChange = (e) =>{
this.setState({selectedTodo: e.target.value});
}
对此
handleChange = (e) =>{
this.setState({selectedTodo: e});
}
我正在使用 react-select
。当我 select 从 select 得到一个确定值时,我有下一期
TypeError: Cannot read property 'value' of undefined
此外,从 reducer 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;
预期的行为是下拉列表显示待办事项,当我select输入待办事项值时我没有收到错误
TypeError: Cannot read property 'value' of undefined
我认为正如 react-select 的文档所说
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
this.handleChange 将直接 return selected 选项而不是事件对象。
handleChange = selectedOption => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
};
而且我认为您也不需要绑定 handleChange 方法。
包react-select
直接returns有值
json
{label:"ABC", value:"abc"}
改变这个
handleChange = (e) =>{
this.setState({selectedTodo: e.target.value});
}
对此
handleChange = (e) =>{
this.setState({selectedTodo: e});
}