作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当前平台:NodeJS(最小)、客户端 React w/Redux、Formik,是的。
给出以下示例代码(不包括整个 React 组件代码,因为它与问题无关):
class RegisterPage extends React.Component {
constructor(props) {
super(props);
}
// (...)
render () {
<Form>
<Field name="email" type="email" />
<Field name="password" type="password" />
<Field
name="myCheckbox"
type="checkbox"
checked={this.props.values.myCheckbox}
onChange={ ?????????? } />
</Form>
}
}
const handleFormSubmission = (values, { resetForm, setErrors, setSubmitting }) => {
console.log(values);
};
const handleFormChange = (event) => {
event.persist();
console.log('changed');
};
const MyFormik = withFormik({
mapPropsToValues ({ email, password, myCheckbox }) {
return {
email: email || '',
password: password || '',
myCheckbox: myCheckbox || false
}
},
validationSchema: (...Yup schema here...),
handleSubmit (values, bag) { return handleFormSubmission(values, bag); }
})(RegisterPage);
export default connect()(MyFormik);
...如何使用handleChange方法?我需要保留原始的(来自 Formik 的),同时添加处理该复选框更改的代码。有一些组件行为取决于该复选框的选中值。
请注意,我没有将 onChange 属性传递给电子邮件或密码,因为没有额外的行为可以对其进行编码。该复选框将具有特殊行为。
最佳答案
您可以为复选框声明一个处理程序,并使用它!使用 Formkit 的 native 处理程序和您的自定义处理程序。
class RegisterPage extends React.Component {
constructor(props) {
super(props);
}
// (...)
handleCheckBox: (e) => {
// do whatever you want to the value
}
render () {
<Form>
<Field name="email" type="email" />
<Field name="password" type="password" />
<Field
name="myCheckbox"
type="checkbox"
checked={this.props.values.myCheckbox}
onChange={(e) => {this.props.handleChange(e); this.handleCheckBox(e)}} />
</Form>
}
}
关于reactjs - withFormik() : How to use handleChange,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51159477/
我是一名优秀的程序员,十分优秀!