问题描述
我学会了反应，我正在尝试创建一个步进器来正确管理表单，我正在寻找最合适的方法将输入值从一个步骤传递到另一个步骤 完整代码如下
此处是步骤1的输入值：
handleSend(event) {
event.preventDefault();
...
};
我想将formik.values.exerciseManager传递给步骤2，以便我可以在其中使用它
不同的js文件中的步骤1和步骤2
我该如何纠正？
这是第1步：
我希望它会显示在这里：
完整的第1步代码
<MDBInput
label="exerciseManager"
name="exerciseManager"
type="text"
value={formik.values.exerciseManager}
onChange={formik.handleChange}
outline
size="lg"
/>
此处是Soform.js的完整代码
//now check that the value get correct to the database
const Certifications = (props) => {
//state //Setstate
const [fieldApproveOptions,setFieldApproveOptions] = useState([])
//useEffect Hooks
useEffect(() => {
axios.get('/api/certifications/fieldApproveOptions?userId=1234567&rank=Colonel&force=Moran')
.then(response => {
console.log(response.data)
setFieldApproveOptions(response.data.fieldApproveOptions)
}
).catch(err => console.log(err))
},[])
const formik = useFormik({
initialValues: {
exerciseName: '',//exerciseBy: '',autofill current user from session
exerciseOOB: '',exercisePOD: '',exerciseType: '',// options should be pull from db
exerciseLive: '',fieldApprove: '',// options should be pull from db
fileApprove: '',// options should be pull from db
artilleryApprove: '',// options should be pull from db
exerciseManager: '',trainerOfficerApprove: '',// options should be pull from db
cerRes: '',fieldApproveOptions: []
},onSubmit: values => {
axios.post('/api/certifications',values)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},})
return (
<Card>
<CardContent>
<div className="Pedding">
<MDBContainer fluid >
<MDBRow center >
<MDBCol md="4" >
<div className="MDBColor">
<form onSubmit={formik.handleSubmit} autoComplete="off">
<p className="h1 text-center" style={{ paddingTop: "10px",fontWeight: "bold" }}>Certifications</p>
<div className="Certifications">
<MDBInput
label="Exercise name"
name="exerciseName"
type="text"
onChange={formik.handleChange}
value={formik.values.exerciseName}
outline
size="lg"
/>
<MDBInput
label="Exercise type"
name="exerciseType"
list="types"
onChange={formik.handleChange}
value={formik.values.exerciseType}
outline
size="lg"
/>
<datalist id="types" >
<option data-value="1" value="Open Terrain">Open Terrain</option>
<option value="Urban warfare" >Urban warfare</option>
<option value="Armoured fighting vehicle" >Armoured fighting vehicle</option>
<option value="unplanned" >unplanned</option>
<option value="live military exercise" >live military exercise</option>
</datalist>
<MDBInput
label="Order of battle"
name="exerciseOOB"
type="number"
min="20"
onChange={formik.handleChange}
value={formik.values.exerciseOOB}
outline
size="lg"
/>
{/*FieldApprove button */}
<MDBInput
label="fieldApprove"
name="fieldApprove"
list="fieldApproves"
onChange={formik.handleChange}
value={formik.values.fieldApprove}
outline
size="lg"
/>
<datalist id="fieldApproves" defaultValue>
{fieldApproveOptions.map((option,i) =>
<option key={i++} value={option.id}>
{option.rank + " " + option.firstName + " " + option.lastName}
</option>)}
</datalist>
<MDBInput
label="fileApprove"
name="fileApprove"
type="text"
value={formik.values.fileApprove}
onChange={formik.handleChange}
outline
size="lg"
/>
<MDBInput
label="artilleryApprove"
name="artilleryApprove"
type="text"
value={formik.values.artilleryApprove}
onChange={formik.handleChange}
outline
size="lg"
/>
<MDBInput
label="exerciseManager"
name="exerciseManager"
type="text"
value={formik.values.exerciseManager}
onChange={formik.handleChange}
outline
size="lg"
/>
<MDBInput
label="trainerOfficerApprove"
name="trainerOfficerApprove"
type="text"
value={formik.values.trainerOfficerApprove}
onChange={formik.handleChange}
outline
size="lg"
/>
<div style={{ fontSize: "large",fontWeight: "bold" }} className="custom-control custom-checkbox">
<input type="checkbox"
onChange={formik.handleChange}
value={formik.values.exerciseLive}
className="custom-control-input"
name="exerciseLive"
id="live"
value="on"
/>
<label className="custom-control-label" htmlFor="live"> live exercise</label>
</div>
{/*pod section*/}
<span style={{ fontSize: "large",fontWeight: "bold",float: "left" }} >part of the day:</span>
<div className="forms" style={{ fontWeight: "bold" }} onChange={formik.handleChange} value={formik.values.exercisePOD} >
{/*night button*/}
<label htmlFor="rdo1">
<input type="radio" id="rdo1" name="exercisePOD" value="night" />
<span className="rdo"></span>
<span>night</span>
</label>
{/*day button*/}
<label htmlFor="rdo2">
<input type="radio" id="rdo2" name="exercisePOD" value="day" />
<span className="rdo"></span>
<span>day</span>
</label>
</div>
<div className="text-center">
<MDBBtn type="submit" color="yellow">Send</MDBBtn>
</div>
</div >
</form >
</div>
</MDBCol>
</MDBRow>
</MDBContainer >
</div>
</CardContent>
</Card>
);
}
export default Certifications;
此处是formikStepper代码
const SoForm = () => {
return (
<p >
{formik.values.exerciseManager}
</p>
)
}
export default SoForm;
解决方法
很难阅读和理解您的代码。尝试提供最少的可重复陈述。我可以理解您的问题，但无法使用您的代码。因此，我创建了我的获奖示例。在这里，codesandbox.io：https://codesandbox.io/s/elegant-shtern-362ki?file=/src/App.js
让我为您解释一下。
index.js -> is entry point,that calls only one component App,as we have no route
App.js -> is the parent component,which has two child,Certification and Panel
Certification.js -> takes input
Panel -> renders data from certification
如果我没记错，那就是您想要的。将一个组件中的数据呈现给另一个组件，这是另一个同级。
App.js：
import React from "react";
import Certifications from "./Certifications";
import Panel from "./Panel";
class App extends React.Component {
state = {
value1: "",value2: ""
};
fromCert = (name,value) => {
this.setState({ [name]: value });
};
render() {
return (
<div>
{this.state.value1}
{this.state.value2}
<Certifications fromCert={this.fromCert} />
<Panel value1={this.state.value1} value2={this.state.value2} />
</div>
);
}
}
export default App;
Panel.js ：
import React from "react";
class Panel extends React.Component {
render() {
return (
<div>
Here we will render data from App,below
<div>{this.props.value1}</div>
<div>{this.props.value2}</div>
Panel ends
</div>
);
}
}
export default Panel;
Certification.js ：
import React from "react";
class Certifications extends React.Component {
state = {
input1: "",input2: ""
};
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
this.props.fromCert(e.target.name,e.target.value);
};
render() {
return (
<div>
<input name="value1" onChange={this.onChange} />
<input name="value2" onChange={this.onChange} />
<div>
Inside certificate
<div>{this.state.input1}</div>
<div>{this.state.input2}</div>
Certificate ends
</div>
</div>
);
}
}
export default Certifications;
首先，认证具有两个状态- value1，value2 。因此，我给了两个输入名称 value1，value2 。这样我就可以动态设置值。 Why? - just imagine I have 10 or 20 states. And that you have in your code.
值的onChange，我用fromCert触发了对App的回调。尝试传递1000+参数，它将成功。 ：眨眼：
当我从认证触发该回调时，它在App.js的fromCert中被调用。这是为什么？原因我已将该函数或方法作为参数-<Certifications fromCert={this.fromCert} />传递。因此，这就是该函数或方法充当回调的原因。当我得到这些值时，我只是将它们设置为App.js的状态。然后将它们作为props传递给Panel。
因此，对应用程序 进行的证书进行任何更改，然后将其传递给面板。
Certification -> App : Child to Parent communication
App -> Panel : Parent to Child communication
Certification -> Panel : Child to Child communication / Sibling communication
尝试想象层次结构。
非常感谢。如有任何疑问，请随时提问。
设置时间 控制面板
错误1：Request method ‘DELETE‘ not supported 错误还原：...