reactjs容器組件的表格值

我是新的反應，並試圖從handleSubmit的firstName輸入中獲取值。 handleSubmit正在工作，但由於某種原因輸入值未定義。我嘗試了其他一些例子，但它們都是React組件中的所有表單。reactjs容器組件的表格值

let SomeForm = (props) => { 

    let firstName = ''; 

    const handleSubmit = (e) => { 
    e.preventDefault(); 
    console.log(firstName); 
    } 

    return (
    <div> 
     <form onSubmit={handleSubmit}> 
     <TextField 
      floatingLabelText="First Name" 
      floatingLabelFixed={true} 
      underlineStyle={styles.underlineStyle} 
      underlineFocusStyle={styles.underlineFocusStyle} 
      value={firstName} 
     /> 
     <input type="submit" value="Submit" /> 
     </form> 
    </div> 
) 
} 
SomeForm = connect()(SomeForm) 

export default SomeForm

來源

2017-04-14 user1572796

哪裏文本字段的？而且看起來你根本沒有更新你的firstName – CodinCat

TextField只是來自Material UI，那你的意思是？ – user1572796

您需要添加onChange到TextField來處理更新的價值。並且由於SomeForm是有狀態組件，因此可能需要使用class組件，而不是無狀態功能組件。

class SomeForm extends React.Component { 
    state = { 
    firstName: '' 
    }; 

    handleChange = (e, value) => { 
    this.setState({ firstName: value }); 
    }; 

    handleSubmit = (e) => { 
    e.preventDefault(); 
    console.log(this.state.firstName); 
    }; 

    render() { 
    return (
     <div> 
     <form onSubmit={this.handleSubmit}> 
      <TextField 
      id="text-field-controlled" 
      floatingLabelText="First Name" 
      floatingLabelFixed={true} 
      underlineStyle={styles.underlineStyle} 
      underlineFocusStyle={styles.underlineFocusStyle} 
      value={this.state.firstName} 
      onChange={this.handleChange} 
      /> 
      <input type="submit" value="Submit" /> 
     </form> 
     </div> 
    ) 
    } 
}

見TextField這裏的API和示例：http://www.material-ui.com/#/components/text-field

來源

2017-04-14 07:03:31 CodinCat

謝謝，有道理，我不應該這樣做的容器 – user1572796

您需要將函數導入TextField組件，並使用onChange獲取輸入值。

handleChange(e){ 
    Console.log(e.target.value) 
}

而且在文本字段

<TextField onChange={this.handleCahnge}/}

或者利用裁判

<TextField ref="textfield" />

並獲得與this.refs.textfield.getValue()

來源

2017-04-14 07:02:32 Andrew

reactjs容器組件的表格值

回答

相關問題