形式与材料-ui

Question

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

Answer 1

添加type="submit"到材质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

最好的选择是学习如何使用带有 React 的表单，然后在完成该部分后转换为材料。

这是来自 React 的一个很好的教程，其中包括提交表单：

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

并使用它的酷功能。

本教程涵盖了其工作原理的所有详细信息

希望有帮助 - 祝你好运！