event.preventDefault在React中不起作用

时间:2016-07-14 04:57:05

标签: javascript reactjs preventdefault

我已经按照教程&他们在event.preventDefault()按钮上使用Save&将表单保存到状态。我还没有真正写过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>
    );
};

我错过了什么吗?

1 个答案:

答案 0 :(得分:2)

而不是onClick它你的input.submit,你应该做

private static List<string> ReadTableColumns(string connectionString)
{
    List<string> columnNames = new List<string>();
    string queryString = 
        "SELECT COLUMN_NAME FROM INFORMATION_SCHEMA.COLUMNS " +
      + "WHERE TABLE_NAME = 'YourTableNameHere'";

    using (SqlConnection connection = new SqlConnection(connectionString))
    {
        SqlCommand command = new SqlCommand(
            queryString, connection);
        connection.Open();
        SqlDataReader reader = command.ExecuteReader();
        try
        {
            while (reader.Read())
            {
                columnNames.Add(reader[0].ToString());
            }
        }
        finally
        {
            // Always call Close when done reading.
            reader.Close();
        }
    }

    return ColumnNames;
}


listBox1.Datasource = ReadTableColumns(yourConnectionString);

因此,事件是正在阻止的表单提交。

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