javascript 反应编辑表单创建
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50147030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React edit form creating
提问by merko
I just started working with React, stuck on editing form. I need to prefill the inputs, but also to be able to edit it. If I put defaultValue, I can't put value on input element. At this moment I can type in inputs but I have to edit both fields(form has two fields) in order to save both values. How I am supposed to do it ?
我刚开始使用 React，一直停留在编辑表单上。我需要预填充输入，但也需要能够编辑它。如果我把 defaultValue，我不能把值放在输入元素上。此时我可以输入输入，但我必须编辑两个字段（表单有两个字段）以保存两个值。我该怎么做？
Example: I have recipe name and ingredients, I open modal with edit form, it's prefilled, I add some ingredients but leave the name untouched. It saves:
示例：我有食谱名称和成分，我用编辑表单打开模态，它是预填充的，我添加了一些成分但保持名称不变。它节省了：
{name: "", ingredients: ing1,ing2,newIngredient}
<form role="form">
<div className="form-group">
<label htmlFor={props.recipeName}>Recipe</label>
<input
type="text"
className="form-control"
defaultValue={props.recipeName || ''}
name="recipeName"
placeholder="Recipe name"
onChange={props.handleChange.bind(this)}/>
</div>
<div className="form-group">
<label htmlFor={props.recipeIngredients}>Ingredients</label>
<textarea
type="text"
className="form-control"
defaultValue={props.recipeIngredients || ''}
placeholder="Enter ingredients separated by commas..."
onChange={props.handleChange.bind(this)}
name="recipeIngredients"></textarea>
</div>
</form>回答by LuisEgan
Store the values in the state. First, add them in the componentDidMountmethod so you have them when you load the form component:
将值存储在状态中。首先，将它们添加到componentDidMount方法中，以便在加载表单组件时拥有它们：
ComponentDidMount() {
const { recipeName } = this.props;
this.setState({ recipeName });
}
Then, the onChangeof each <input>updates the state. So, you save the component's state whichever way you are saving your values now:
然后，onChange每个<input>更新状态。因此，无论您现在以何种方式保存值，都可以保存组件的状态：
updateInputValue(e) {
const { target: {value} } = e;
this.setState({ recipeName: value });
}
<input
type="text"
className="form-control"
value={this.state.recipeName}
name="recipeName"
placeholder="Recipe name"
onChange={this.updateInputValue}/>
When you get to reduxI recommend using Redux Form
当你到达时，redux我建议使用Redux Form
回答by AaronHolland
You would need to put the values of the passed in props into your initial state. You'd need to do this in your constructor.
您需要将传入的 props 的值放入初始状态。您需要在构造函数中执行此操作。
Currently your state is only getting updated via change events, but the initial state is never set (Well probably anyway. I'm only guessing this because you haven't included your full code).
目前，您的状态仅通过更改事件进行更新，但从未设置过初始状态（可能无论如何。我只是猜测，因为您尚未包含完整代码）。
