Как создать приложение React, работающее с Rails 5.1 API

 class IdeaForm extends Component { constructor(props) { super(props) this.state = { title: this.props.idea.title, body: this.props.idea.body } } 

Затем установите значения полей формы в соответствующие значения состояния и установите обработчик onChange :

 <form> <input className='input' type="text" name="title" placeholder='Enter a Title' value={this.state.title} onChange={this.handleInput} /> <textarea className='input' name="body" placeholder='Describe your idea' value={this.state.body} onChange={this.handleInput}> </textarea> </form> 

Мы определим handleInput таким образом, чтобы при вводе в любом из полей ввода соответствующее значение состояния, а затем значение поля обновлялось:

 handleInput = (e) => { this.setState({[e.target.name]: e.target.value}) } 

Отслеживание изменений состояния в React Developer Tools

Давайте посмотрим на эти изменения состояния в действии с расширением браузера React Developer Tools. Вы можете получить его для Chrome здесь и для Firefox здесь .

После установки обновите страницу приложения и откройте консоль разработчика. Вы должны увидеть новую вкладку React.

Когда вы щелкнете по нему, вы увидите дерево компонентов нашего приложения слева и все реквизиты и состояние, связанные с каждым компонентом справа.

Сейчас мы обновляем поля формы, но мы все еще не сохраняем отредактированную идею. Итак, следующее, что нам нужно, это то, что, когда мы размываем поле формы, мы хотим отправить форму и обновить идею.

Конечная точка API для обновления идей

Во-первых, нам нужно определить конечную точку API для обновления идей. Итак, давайте добавим действие update в IdeasController :

 def update @idea = Idea.find(params[:id]) @idea.update_attributes(idea_params) render json: @idea end 

Вернувшись в IdeaForm.js , мы установим обработчик handleBlur с именем handleBlur в форму:

 <form onBlur={this.handleBlur} > 

Мы определим handleBlur чтобы сделать PUT вызов нашей конечной точки API для обновления идей данными идеи из состояния. А пока давайте просто запишем ответ на консоль и посмотрим, работает ли наш вызов:

 handleBlur = () => { const idea = { title: this.state.title, body: this.state.body } axios.put( `http://localhost:3001/api/v1/ideas/${this.props.idea.id}`, { idea: idea }) .then(response => { console.log(response) }) .catch(error => console.log(error)) } 

Нам также нужно импортировать axios в этот файл, чтобы иметь возможность использовать его:

 import axios from 'axios' 

Теперь, если мы нажмем кнопку новой идеи, отредактируем ее заголовок и вычеркнем из этого поля, мы увидим наш ответ API, зарегистрированный в консоли, с новыми отредактированными данными идеи.

То же самое происходит, если мы редактируем тело и размываем это поле.

 handleBlur = () => { const idea = { title: this.state.title, body: this.state.body } axios.put( `http://localhost:3001/api/v1/ideas/${this.props.idea.id}`, { idea: idea }) .then(response => { console.log(response) this.props.updateIdea(response.data) }) .catch(error => console.log(error)) } 

 <IdeaForm idea={idea} key={idea.id} updateIdea={this.updateIdea} /> 

 updateIdea = (idea) => { const ideaIndex = this.state.ideas.findIndex(x => x.id === idea.id) const ideas = update(this.state.ideas, { [ideaIndex]: { $set: idea } }) this.setState({ideas: ideas}) } 

 <span className="notification"> {this.state.notification} </span> 

 constructor(props) { super(props) this.state = { ideas: [], editingIdeaId: null, notification: '' } } 

 this.setState({ ideas: ideas, notification: 'All changes saved' }) 

 handleInput = (e) => { this.props.resetNotification() this.setState({[e.target.name]: e.target.value}) } 

 <IdeaForm idea={idea} key={idea.id} updateIdea={this.updateIdea} resetNotification={this.resetNotification} /> 

 resetNotification = () => { this.setState({notification: ''}) } 

 import React, { Component } from 'react' class Idea extends Component { handleClick = () => { this.props.onClick(this.props.idea.id) } render () { return( <div className="tile"> <h4 onClick={this.handleClick}> {this.props.idea.title} </h4> <p onClick={this.handleClick}> {this.props.idea.body} </p> </div> ) } } export default Idea 

 return (<Idea idea={idea} key={idea.id} onClick={this.enableEditing} />) 

 enableEditing = (id) => { this.setState({editingIdeaId: id}) } 

 <input className='input' type="text" name="title" placeholder='Enter a Title' value={this.state.title} onChange={this.handleInput} ref={this.props.titleRef} /> 

 <IdeaForm idea={idea} key={idea.id} updateIdea={this.updateIdea} titleRef= {input => this.title = input} resetNotification={this.resetNotification} /> 

 enableEditing = (id) => { this.setState({editingIdeaId: id}, () => { this.title.focus() }) } 

 <div className="tile"> <span className="deleteButton"> x </span> 

 .deleteButton { visibility: hidden; float: right; margin: 5px; font-size: 14px; cursor: pointer; color: red; } .tile:hover .deleteButton { visibility: visible; } 

 <span className="deleteButton" onClick={this.handleDelete}> x </span> 

 handleDelete = () => { this.props.onDelete(this.props.idea.id) } 

 <Idea idea={idea} key={idea.id} onClick={this.enableEditing} onDelete={this.deleteIdea} /> 

 def destroy @idea = Idea.find(params[:id]) if @idea.destroy head :no_content, status: :ok else render json: @idea.errors, status: :unprocessable_entity end end 

 deleteIdea = (id) => { axios.delete(`http://localhost:3001/api/v1/ideas/${id}`) .then(response => { const ideaIndex = this.state.ideas.findIndex(x => x.id === id) const ideas = update(this.state.ideas, { $splice: [[ideaIndex, 1]]}) this.setState({ideas: ideas}) }) .catch(error => console.log(error)) }