Question

我正在尝试在React中使用select标签。我有以下组件：

class InteractionHeader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            allDays: [],
            selected: ""
        };

        this.dateChanged = this.dateChanged.bind(this);
    }

    componentDidMount() {
        this.setState({
            allDays: ["a", "b"],
            selected: "a"
        });
    }

    dateChanged(e) {
        e.preventDefault();
        console.log(event.target.value);
    }
}

在渲染中，我有以下内容：

render() {
    return (
        <div>
            <select value={this.state.selected} onChange={this.dateChanged}>
                {this.state.allDays.map((x) => {
                    return <option key={`${x}`} value={`${x}`}>{x}</option>
                })};
            </select>
        </div>
    );
}

但是，当我选择其他选项时，控制台将打印undefined而不是我选择的选项。发生了什么事以及如何预防？

Answer 1

你说错了

dateChanged(e) {
        console.log(e.target.value);
    }

如果您不希望页面刷新并尝试进行服务器端调用，则应使用prevent default。如果选择，则没有这样的东西。

Answer 2

您在dateChanged（e）方法中有错字。您需要记录e.target.value而不是event.target.value。

在React中使用HTML选择器

2 个答案: