Форма с материалом-ui

Question

Я пытаюсь создать простую форму в материале-ui с логином и паролем TextFields и RaisedButton, чтобы отправить форму. Каков наилучший способ обработки событий в RaisedButton и отправки формы?

Answer 1

Ваш лучший выбор - узнать об использовании форм с реакцией, а затем преобразовать их в материал, если у вас есть эта часть.

Вот хороший учебник от реакции, которая включает в себя отправку формы:

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

Соответствующий код:

Рендер Function - Обратите внимание на обработчик события на форме

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

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

И использовать интересные функции этого.

Все детали того, как это работает, рассматриваются в учебнике

Надежда, что помогает - удачи!

Answer 2

Предлагаемое мероприятие - onTouchTap и требует установки react-tap-event-plugin. Инструкции для этого можно найти here в верхней части страницы.

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

Надеюсь, это поможет.

Answer 3

Добавить type="submit" в элемент кнопки элемента материала, например 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> 
    ) 
    } 
}