通过函数

Question

在这里反应新手（谈论陡峭的学习曲线！）。

使用关键字输入和清除按钮构建一个简单的组件 - 但很难理解为什么我的状态值会被记录为对象？

任何建议都很棒 - 谢谢！

`    class FacetsFilter extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                facetsKeyword: ''
            };
        }

        handleOnChange(e) {
            this.setState({
                facetsKeyword: e
            });
            console.log('This is it : ' + e);
        }
        handleClearClick(e) {
            e.preventDefault();
            this.setState({
                facetsKeyword: ''
            });
        }

        render() {
            return (
                <div className="facetsFilter">
                    <h3 className="facetsTitle title is-5">Refine results</h3>
                    <div className="facetsKeywordFilter columns is-gapless">
                        <div className="column">
                            <TextField
                                id="facetsKeywordInput"
                                className="facetsKeywordInput"
                                hintText="Keyword filter"
                                onChange={this.handleOnChange.bind(this)}
                                value={this.state.facetsKeyword}
                            />
                        </div>
                        <div className="column is-narrow">
                            <IconButton
                                className="facetsClearButton"
                                tooltip="Clear filter"
                                onClick={this.handleClearClick.bind(this)} >
                                <NavigationClose />
                            </IconButton>
                        </div>
                    </div>

                    <div className="facetsList body-2">
                        {facetsList.map((item, index) => (
                            <div>
                                <h3 key={index} className="facetsCategoryTitle">{item.category}</h3>
                                <div className="facetListItems">
                                    {item.facets.map((subitem) => (
                                        <div>{subitem}</div>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            );
        }
    }

    export default FacetsFilter;`

我只是想知道为什么当我在console.log中将它作为[Object Object]返回的onChange函数。

感谢您的任何建议。

Answer 1

传递的参数e不是文本而是javascript事件对象。因此，如果您想要更改文本，请使用e.target.value。

    handleOnChange(e) {
        const {value} = e.target;
        this.setState({
            facetsKeyword: value
        });
        console.log('This is it : ' + value);
    }