为什么当我单击“提交”按钮时，ReacJs中的表单返回空的Json对象？

Question

我正在尝试使用ReactJs中的表单将值作为defaultValue从我的输入框发送到另一个组件。 这是我的表格：

    let NameTab = props => {

            const {handleSubmit, reset} = props;
            return (
                <form  className="form" onSubmit={ handleSubmit }>
                    <div className="jumbotron">
                <div>
                            <label>Name</label>
                            <div style={{marginTop: -28, marginLeft: -50}}>
                                <input
                                    style={{marginLeft: 170, width: 350, marginTop: 3, height:30}}
                                    className="control-label"
                                    name="name"
                                    type="text"
                                    defaultValue="Michael"
                                    />
                            </div>
                        </div>
        <button type="submit" className="btn btn-info"
               style={{marginLeft: -60, marginRight: 20, marginTop: 5}}> Submit </button>
        <button className="btn btn-warning" style={{marginLeft: 100, marginTop: 5}}
                onClick={reset}> Reset </button>
             </div>
            </form>
            );
        };

问题是我得到一个空的Json-object ： you submitted: {}谁能帮助我找到为什么返回对象为null 。 我期望{"name":"Michael"} 。 谢谢

Edit

我的handleSubmit方法：

const showValues = values =>
    new Promise(resolve => {
        setTimeout(() => {  // simulate server latency
            window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
            resolve();
        }, 200);
    });

Answer 1

我想您需要将InitialValues设置为redux形式，而不是默认值，请尝试

let NameTab = props => {

            const {handleSubmit, reset} = props;
            return (
                <form  className="form" onSubmit={ handleSubmit }>
                    <div className="jumbotron">
                <div>
                            <label>Name</label>
                            <div style={{marginTop: -28, marginLeft: -50}}>
                                <Field
                                    className="control-label"
                                    name="name"
                                    component="input"
                                    type="text"

                                    />
                            </div>
                        </div>
        <button type="submit" className="btn btn-info"
               style={{marginLeft: -60, marginRight: 20, marginTop: 5}}> Submit </button>
        <button className="btn btn-warning" style={{marginLeft: 100, marginTop: 5}}
                onClick={reset}> Reset </button>
             </div>
            </form>
            );
        };



const mapInitialValues = () => ({
  initialValues: {
    name: "Michael"
  }
});


export default reduxForm({
    form: 'NameTab'
}, mapInitialValues)(NameTab);