无法在Materia-UI中获得价值表格Textfield

Question

parent component

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))是添加子组件。单击"添加"按钮时，更改状态（增加），然后添加子组件。另外，我在子组件中添加this.handleChange，而e.target.value的结果是正确的。

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

Answer 1

是可以预期的， <form>本身没有 value属性。另一方面，它是孩子 - 确实有 value属性填充（如果它们是形式元素），因此您的<TextField>（我认为 - 我认为是<input>）记录您的输入数据，并且表单没有。

>

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

• 元素
• 长度
• 名称
• 方法
• 目标
• 动作
• 编码/Enctype
• AcceptChareet
• 自动完成
• Novalidate