ruby - 使用嵌套属性 Ruby API 和反应表单
问题描述
我有一个反应形式,背面使用 ruby API...我希望能够用一个表格来制作具有成分和比例的鸡尾酒...关系是鸡尾酒通过比例有很多成分,而成分有许多鸡尾酒通过比例....
后端如下
鸡尾酒模型
class Cocktail < ApplicationRecord
has_many :proportions
has_many :ingredients, through: :proportions
accepts_nested_attributes_for :proportions
end
成分模型
class Ingredient < ApplicationRecord
has_many :proportions
has_many :cocktails, through: :proportions
end
比例模型
class Proportion < ApplicationRecord
belongs_to :cocktail
belongs_to :ingredient
accepts_nested_attributes_for :ingredient
end
鸡尾酒控制器创建方法
def create
cocktail = Cocktail.new(cocktail_params)
if cocktail
cocktail.save
render json: cocktail
else
redner json: {error: "cocktail not valid "}
end
end
private
def cocktail_params
params.require(:cocktail).permit(:name, :description, :instructions, :source)
end
到目前为止,我能够制作鸡尾酒……我不确定现在如何整合这些成分并将其添加到后端。
看起来像这样做出反应
import React, { useState, Fragment } from "react";
const FormCocktails = () => {
const [inputFields, setInputFields] = useState([
{ name: '', description: '', instructions: "", source: ""}
]);
///here were we get the info we need to submit
const handleSubmit = e => {
e.preventDefault();
debugger
const confObj = {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
body: JSON.stringify({
name: inputFields[0].name,
description: inputFields[0].description,
instructions: inputFields[0].instructions,
source: inputFields[0].source
})
}
fetch("http://localhost:3000//api/v1/cocktails", confObj)
.then(response => response.json())
.then(obj => console.log(obj))
.catch(error => console.log(error))
}
const handleInputChange = (index, event) => {
const values = [...inputFields];
if (event.target.name === "name") {
values[index].name = event.target.value;
} else if(event.target.name ==="description") {
values[index].description = event.target.value;
}else if(event.target.name ==="instructions") {
values[index].instructions = event.target.value;
}else{
values[index].source = event.target.value;
}
setInputFields(values);
};
const handleAddFields = () => {
const values = [...inputFields];
inputFields.push({ instructions: "" });
setInputFields(values);
};
const handleRemoveFields = index => {
const values = [...inputFields];
values.splice(index, 1);
setInputFields(values);
};
//// { name: '', description: '', instructions: "", source: ""}
return (
<>
<h1>New Cocktails</h1>
<form onSubmit={handleSubmit}>
<div className="form-row">
{inputFields.map((inputField, index) => (
<Fragment key={`${inputField}~${index}`}>
<div className="form-group col-sm-6">
<label htmlFor="name">Cocktail Name</label>
<input
type="text"
className="form-control"
id="name"
name="name"
value={inputField.name}
onChange={event => handleInputChange(index, event)}
/>
</div>
<div className="form-group col-sm-4">
<label htmlFor="description">Cocktail description</label>
<input
type="text"
className="form-control"
id="description"
name="description"
value={inputField.description}
onChange={event => handleInputChange(index, event)}
/>
</div>
<div className="form-group col-sm-4">
<label htmlFor="instructions">Cocktail instructions</label>
<input
type="text"
className="form-control"
id="instructions"
name="instructions"
value={inputField.instructions}
onChange={event => handleInputChange(index, event)}
/>
</div>
<div className="form-group col-sm-4">
<label htmlFor="source">Cocktail source</label>
<input
type="text"
className="form-control"
id="source"
name="source"
value={inputField.source}
onChange={event => handleInputChange(index, event)}
/>
</div>
<div className="form-group col-sm-2">
<button
className="btn btn-link"
type="button"
onClick={() => handleRemoveFields(index)}
>
-
</button>
<button
className="btn btn-link"
type="button"
onClick={() => handleAddFields()}
>
+
</button>
</div>
</Fragment>
))}
</div>
<div className="submit-button">
<button
className="btn btn-primary mr-2"
type="submit"
onSubmit={(e) =>handleSubmit(e)}
>
Save
</button>
</div>
<br/>
{/* <pre>
{JSON.stringify(inputFields, null, 2)}
</pre> */}
</form>
</>
)
}
export default FormCocktails;
解决方案
推荐阅读
- types - 有没有办法从给定域动态构建函数到给定的共域?
- git - 将 Git 分支克隆到新存储库
- java - 如何直接从 Selenium API 代码打开带有消息的浏览器弹出窗口?
- spring - Jersey 2.27、spring 5.0.7.RELEASE 和 Java 10 合规性问题
- javascript - 使用 url 正文链接到短信应用
- azure - 触发逻辑应用为多个 CRM 组织执行
- python - 根据键值删除日期在所需日期点之前的行
- powershell - 在詹金斯管道中不同代理的PS阶段之间传递变量
- aws-glue - 如何在 aws 胶水中进行模式演变?
- javascript - Javascript - 返回返回函数的值