形式与材料-ii

我想在材料用户界面中创建一个简单的形式与登录名和密码TextFields和RaisedButton提交表单。处理RaisedButton事件并提交表单的最佳方法是什么？形式与材料-ii

2016-07-01 kprim

最好的办法是了解如何使用表单进行反应，然后在将部分关闭后转换为材质。

这里是一个很好的教程从反应包括提交表单：

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: ''});

}，

您可以通过将输入元素此示例转换到材料的UI文本字段

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

和使用它的很酷的功能。

所有的这种工作是如何本教程中

希望帮助的细节 - 祝你好运！

来源

2016-07-03 04:29:37

我想这是错误的是你不能只是将一个''转换为'TextField'或'RaisedButton'。 Material UI组件有一个不同的API（我仍然在寻找自己的确切答案） – Patrick

Hey Patrick，我可以将它转换为material -ui并将它贴出来，如果你还在看，LMK。 –

我不是提问者，所以我无法选择你的答案，但你是正确的，你可以做''并且该道具将传递给本地''并正确地提交表单。我现在在我的代码中有确切的事情。就实际回答问题而言，我认为答案的材质UI版本可能在技术上更为正确。 – Patrick

您正在寻找的活动是onTouchTap，需要安装react-tap-event-plugin。可以在页面顶部找到here的说明。

<RaisedButton label="Default" style={style} onTouchTap={yourEventHandler} />

希望这会有所帮助。

来源

2017-06-21 21:55:16 Todd

将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.change} />  
      <RaisedButton label="Submit" type="submit" /> 
     </form> 
    ) 
    } 
}

来源

2017-07-21 21:32:38

形式与材料-ii

回答

相关问题