Question

我正在尝试使用登录名和密码TextFields以及RaisedButton在material-ui中构建一个简单的表单来提交表单。在RaisedButton上处理事件并提交表单的最佳方法是什么？

Answer 1

将type="submit"添加到Material UI按钮元素，例如 RaisedButton ，点击时它将作为提交按钮使用。提交表单后，它将触发表单上的onSubmit并运行 handleSubmit 回调。

class MyForm extends React.Component {
  constructor() {
     super();
     this.state = {id: null};
  }
  handleChange = (event) => {
     this.setState({id: event.target.value});
  }
  handleSubmit = (event) => {
     //Make a network call somewhere
     event.preventDefault();
  }
  render() {
     return( 
        <form onSubmit={this.handleSubmit}>
          <TextField floatingLabelText="ID Number" onChange={this.handleChange} />      
          <RaisedButton label="Submit" type="submit" />
        </form>
     )
  }
}

Answer 2

你最好的办法是学习如何使用带有反应的表格，然后在你完成那部分后转换成材料。

这是一个很好的反应教程，包括提交表格：

https://facebook.github.io/react/docs/tutorial.html

相关守则：

渲染函数 - 注意表单上的事件处理程序

render: function() {
return (
  <form className="commentForm" onSubmit={this.handleSubmit}>
    <input
      type="text"
      placeholder="Your name"
      value={this.state.author}
      onChange={this.handleAuthorChange}
    />
    <input
      type="text"
      placeholder="Say something..."
      value={this.state.text}
      onChange={this.handleTextChange}
    />
    <input type="submit" value="Post" />
  </form>
);

这是回调的实现

handleSubmit: function(e) {
e.preventDefault();
var author = this.state.author.trim();
var text = this.state.text.trim();
if (!text || !author) {
  return;
}
// TODO: send request to the server
this.setState({author: '', text: ''});

}，

您可以通过将输入元素转换为TextField

将此示例转换为material-ui

http://www.material-ui.com/#/components/text-field

并使用它的酷炫功能。

教程

中介绍了其工作原理的所有细节

希望有所帮助 - 祝你好运！

Answer 3

您要查找的活动是.as-console-wrapper { max-height: 100% !important; }，需要安装onTouchTap。可以在页面顶部找到here的说明。

react-tap-event-plugin

希望这有帮助。

形式与材料-ui

3 个答案: