Question

父组件

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

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

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

Answer 1

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

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

元素
长度
名称
方法
靶
动作
编码/加密类型
acceptCharset
自动完成
NOVALIDATE

无法从materia-ui中获取TextField的值

1 个答案: