event.preventDefault 无法在 React 中工作

Question

我按照教程进行操作，他们在 Save 按钮上使用了 event.preventDefault()，并将表单保存到状态中。我还没有真正编写 input 标签，但到目前为止我已经添加了保存按钮，它有点像重新加载它不应该做的页面。

这是我的页面组件：

class manageLocationPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {

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

    componentWillMount() {

    }

    componentDidMount() {

    }

    SaveLocation(event) {
        event.preventDefault();
        console.log("Saved");
    }

    render() {
        return (
            <div>
                <LocationForm listingData={this.props.listingData} onSave={this.SaveLocation}/>
            </div>
        );
    }
}

我的 locationForm 组件：

const LocationForm = ({listingData, onSave, loading, errors}) => {
    return (
        <form>
            <h1>Add / Edit Location</h1>
            <TextInput />

        {/*Here below is where we submit out input data*/}
            <input type="submit" disabled={loading} value={loading ? 'Saving...' : 'Save'} className="buttonSave" onClick={onSave}/>
        </form>
    );
};

我是不是漏掉了什么？

Answer 1

你应该

而不是点击你的 input.submit

const LocationForm = ({listingData, onSave, loading, errors}) => {
    return (
        <form  onSubmit={onSave}>
            <h1>Add / Edit Location</h1>
            <TextInput />

        {/*Here below is where we submit out input data*/}
            <input type="submit" disabled={loading} value={loading ? 'Saving...' : 'Save'} className="buttonSave"/>
        </form>
    );
};

所以事件是被阻止的表单提交。

https://facebook.github.io/react/docs/tutorial.html#submitting-the-form

event.preventDefault 无法在 React 中工作

event.preventDefault not working in React

javascript

reactjs

preventdefault