reactjsコンテナコンポーネントのフォームの値

Question

私は反応が新しく、handleSubmitのfirstName入力から値を取得しようとしています。 handleSubmitは動作していますが、何らかの理由で入力値が未定義です。他のいくつかの例を試してみましたが、Reactコンポーネントのすべてのフォームでした。

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 

Answer 1

で値を取得します。 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のTextFieldからである

Answer 2

TextFieldコンポーネントにスローし、onChangeで入力値を取得する機能が必要です。

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

とTextField

で

<TextField onChange={this.handleCahnge}/} 

または使用、参考文献

<TextField ref="textfield" /> 

、あなたは更新を処理するためにTextFieldにonChangeを追加する必要がthis.refs.textfield.getValue()