我有一个动态形式作为通过基于类的组件生成的功能组件。我要设置重置按钮，以清除输入字段值并将状态设置为null数组。
完整的代码在这里可用：https： //codesandbox.io/s/beautiful-archimedes-o1ygt
我想要一个重置按钮，清除所有输入值并将Itemvalues数组初始化为null。即使我将值设置为null，也不会清除输入字段。
但是，我面临的问题是，由于它是动态表单和功能组件，因此对于每个单独的表单字段都没有预定义的状态，因此很难将值设置为null。有人可以帮忙吗，我长期以来一直坚持
我有一个功能组件，并在其中创建了一个按钮。我还使用“Use_effect()”挂钩。我的主要是重新渲染功能组件，在单击按钮时更新 use_effect() 挂钩。
const Emp_list = (props) => {
useEffect(() => {
props.getList(props.state.emp);
}, []);
return (
<div>
{props.state.emp.map((val ) =>
{val.feature_code}
{val.group_code}
<button onClick = {() => props.removeEmpFromList(val.feature_code)} > Remove </button>
<EmpForm empList={props.state.emp}
onChangeText = {props.onChangeText}
/>
</div>
<button onClick= {() => props.getdata (props.state)}>Get Names</button>
<p>
</div>
);
};
export default Emp_list;
removeEmpFromList = (i) => {
const remaining = this.state.emp( c => c.feature_code !== i)
this.setState({
emp: [...remaining]
})
}
当我单击“删除”按钮时，它基本上将从列表中删除该员工。该函数removeEmpFromList将更新状态。功能组件EmpForm基本上显示所有员工的列表。
所以我想重新渲染页面，以便更新 useEffect() 挂钩中的状态值。因此，当重新渲染时再次调用 …
我有一个表单，我要求用户输入几个字段的字段值，将字段值存储在状态中并以自定义格式显示状态值。
所以，我有几个输入字段和一个提交按钮：
<button onClick={this.handleSubmit}>Submit</button>
{
this.state.credentials &&
//<Credentials value={this.state}/>
<Credentials value={JSON.stringify(this.state, undefined, 2)} />
}
Credentials 函数将组件的状态转换为 JSON 格式：
const Credentials = ({value} ) => {
return <pre>{formatState(value)}</pre>;
}
formatState 函数将基本上操纵状态值并以我想要的方式显示它们：
function formatState(state) {
console.log("hi")
console.log(state);
const output = state.groups.reduce((final, s)=> {
console.log(output)
const values = Object.keys(s).reduce((out, o)=> {
out[o] = s[o].map(k => Object.values(k))
return out;
}, {})
final = {...final, ...values}
return final;
}, {})
console.log(output)
}
状态如下所示：
{
"groups": [
{
"typeA": [
{
"name": "abc"
},
{ …我在反应中制作了一个表单，它接受用户的输入并将其存储在状态中。现在，我想在用户单击 React 中提交按钮下方输入字段中的“提交”按钮时显示状态值。我刚开始反应。
我有一个功能组件，里面有一个按钮。我想在单击该按钮时调用一个功能组件。
当我们点击提交按钮时，预览按钮出现，当用户点击预览按钮时，预览功能组件被调用。
const Form =(props)=>{
handlePreview=(e)=>{
e.preventDefault();
return <Preview/>
}
return(
<input name="email" type="text"/>
<button type="submit" onClick={props.handleSubmit}>Submit</button><br/>
{props.render&&
<button type="submit" onClick={handlePreview}>Preview</button>
}
)
}
当我单击“提交”按钮时，会显示预览按钮，但是当我单击“预览”按钮时，它不会导航到<Preview>功能组件
我在功能组件中有一个表。表格中的每一行在该行的末尾都有一个编辑按钮。当我单击“编辑”按钮时，它会将更改应用于所有编辑按钮。我如何知道单击了哪个按钮并仅对其应用更改？（我有很多行，所以我不能为每个按钮创建一个状态）
我有一个状态对象数组。我想将数组内的值转换为键值对
因此，我的状态如下所示：
0: {emp_code: "a001", company_code: "company_a", name: "abx", details: Array(3), details_dtypes: Array(3)}
1: {emp_code: "b002", company_code: "company_b", name: "xbz ", details: Array(2), details_dtypes: Array(2)}
//and so on adding other values to the array
我想将emp-code和company_code转换为键值对，并像JSON对象一样显示；因此，JSON输出如下所示：
{
emp_and_company:
{
"company_a" : ["a001","a002"],
"company_b" : ["b002","b003"]
}
}
所以我只想将company_code作为键并将值作为emp_code