无法从 Material-ui 中的 TextField 获取值答案

【问题标题】：Cannot get value form TextField in materia-ui无法从 Material-ui 中的 TextField 获取值
【发布时间】：2017-03-13 09:16:08
【问题描述】：

父组件

export default class Parent extends Component {
  handleSubmit = (e) => {
    e.preventDefault();
    console.log('1', e.target);
    // the result is like <form><div>...<input/></div></form>
    console.log('2', e.target.value);
    // the result is undefined
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          {this.state.products.map((val) => (val))}
          <RaisedButton type="submit" label="Submit" primary={true}/>
          <RaisedButton label="Add" primary={true} onClick={this.handleAdd}/>
        </form>
      </div>

    )
  }
}

子组件

render() {
  return (
    <div>
      <TextField
        id="name"
        placeholder="Name"
        onChange={this.handleChange}
      />
      <TextField
        id="brand"
        placeholder="Brand"
        onChange={this.handleChange}
      />
    </div>
  )
}

Parent Component中的this.state.products.map((val) => (val))是添加子组件。单击添加按钮时，状态会更改（增加），然后添加子组件。另外，我在 Child 组件中添加了this.handleChange，e.target.value 的结果是正确的。

即使我可以从子组件中的this.handleChange 获取e.target.value，为什么我不能从父组件中的this.handleSubmit 获取e.target.value？

【问题讨论】：

标签： forms reactjs submit textfield material-ui

【解决方案1】：

可以预料，<form> 本身没有 value 属性。另一方面，它是孩子 - 确实填充了value 属性（如果它们是表单元素），所以你的<TextField>（我假设它是<input>）记录你输入的数据而表单没有。

您可以在MDN 处查看form 元素的综合API，有效属性为：

元素
长度
姓名
方法
目标
动作
编码/enctype
接受字符集
自动完成
没有验证

【讨论】：