Submitボタンをクリックすると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方法：私はあなたの代わりにデフォルトのReduxの形にInitialValuesを設定する必要があると思います

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

、

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