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容器组件的表格值

回答

相关问题