Javascript 为什么我在ReacJs中的表单在单击提交按钮时返回空的Json对象？

我正在尝试使用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>
            );
        };

---

我想您需要将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);

let NameTab=props=>{
const{handleSubmit，reset}=props；
返回(
名称
提交
重置
);
};
常量mapInitialValues=（）=>({
初始值：{
姓名：“迈克尔”
}
});
导出默认reduxForm({
表格：'NameTab'
}，MapinitialValue）（名称选项卡）；

能否为

handleSubmit

函数添加代码？您是否正在使用redux表单

@Shubham Khatri

是。我正在使用redux表单。

@kqcef

我添加了

handleSubmit

函数。在结束表单标签

@Shubham Khatri

之前缺少结束div。它不起作用。我尝试了保留

defaultValue

和不保留。和：导出默认reduxForm（{form:'NamtTab'}，mapInitialValues）（NameTabComponent）；-我哪里做错了？是不是应该是NameTab而不是NameTabComponent它是

NameTab

as

let

，但我在调用文件：

NameTabComponent.js

name:“Michael”

-

name

这里是这个“Michael”或这个

name=

？你不调用文件名，但是组件，因此应该只使用NameTab，因为输入字段的名称是

name

，我们将初始值指定为name:“Michael”

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);