我已经使用formsy-react-2创建了一个表单,但是它不起作用。我正在
错误:表单输入在使用时需要一个name属性
我是React JS的新手,我不知道在React JS中使用表单时哪个包是最好的。请给我一些建议。
这是React JS中我的表单类的源代码。我正在使用React版本'16 .5.2'
import React from 'react';
import Formsy from 'formsy-react-2';
class MyInput extends Formsy.Mixin {
static defaultProps = {
type: 'text'
}
updateValue = (event) => {
this.setValue(event.target.value);
}
render() {
const {type, ...rest} = this.removeFormsyProps(this.props);
const errorMessage = this.getErrorMessage();
return (
<div>
<input {...rest} type={type} value={this.getValue()} onChange={this.updateValue}/>
<span>{errorMessage}</span>
</div>
)
}
}
class MyInputHOC extends React.Component {
updateValue = (event) => {
this.props.setValue(event.target.value);
}
render() {
const errorMessage = this.getErrorMessage();
return (
<div>
<input type='text' value={this.props.getValue()} onChange={this.updateValue}/>
<span>{errorMessage}</span>
</div>
)
}
}
export default Formsy.HOC(MyInputHOC);
// Using your new component
class MyForm extends React.Component {
state = {
formIsValid: false
}
enableSubmit() {
this.setState({formIsValid: true});
}
disableSubmit() {
this.setState({formIsValid: false});
}
submit(model) {
console.log(model);
// model = {
// foo: 'foo@foo.com',
// bar: 10
// }
}
// This code results in a form with a submit button that will run the `submit`
// method when the submit button is clicked with a valid email. The submit button
// is disabled as long as
// - the foo input is empty or the value is not an email; and
// - the bar input is not an integer.
// On validation error it will show the error message.
render() {
return(
<Formsy.Form onValidSubmit={this.submit} onValid={this.enableSubmit} onInvalid={this.disableSubmit}>
<MyInput name='foo' validations='isEmail' validationError='This is not a valid email' required/>
<MyInputHOC name='bar' validations='isInt' validationError='This is not an integer' />
<button type="submit" disabled={!this.state.formIsValid}>Submit</button>
</Formsy.Form>
)
}
}
答案 0 :(得分:1)
您还需要在name
组件中使用/指定MyInputHOC
属性。
在MyInput
中,组件name
的属性是通过{...rest}
传递的。
import React from 'react';
import Formsy from 'formsy-react-2';
class MyInput extends Formsy.Mixin {
static defaultProps = {
type: 'text'
}
updateValue = (event) => {
this.setValue(event.target.value);
}
render() {
const {type, ...rest} = this.removeFormsyProps(this.props);
const errorMessage = this.getErrorMessage();
return (
<div>
<input {...rest} type={type} value={this.getValue()} onChange={this.updateValue}/>
<span>{errorMessage}</span>
</div>
)
}
}
class MyInputHOC extends React.Component {
updateValue = (event) => {
this.props.setValue(event.target.value);
}
render() {
const errorMessage = this.getErrorMessage();
return (
<div>
<input name={this.props.name} type='text' value={this.props.getValue()} onChange={this.updateValue}/>
<span>{errorMessage}</span>
</div>
)
}
}
export default Formsy.HOC(MyInputHOC);
// Using your new component
class MyForm extends React.Component {
state = {
formIsValid: false
}
enableSubmit() {
this.setState({formIsValid: true});
}
disableSubmit() {
this.setState({formIsValid: false});
}
submit(model) {
console.log(model);
// model = {
// foo: 'foo@foo.com',
// bar: 10
// }
}
// This code results in a form with a submit button that will run the `submit`
// method when the submit button is clicked with a valid email. The submit button
// is disabled as long as
// - the foo input is empty or the value is not an email; and
// - the bar input is not an integer.
// On validation error it will show the error message.
render() {
return(
<Formsy.Form onValidSubmit={this.submit} onValid={this.enableSubmit} onInvalid={this.disableSubmit}>
<MyInput name='foo' validations='isEmail' validationError='This is not a valid email' required/>
<MyInputHOC name='bar' validations='isInt' validationError='This is not an integer' />
<button type="submit" disabled={!this.state.formIsValid}>Submit</button>
</Formsy.Form>
)
}
}
更新
为了使事情更清楚,您共享的代码是使用Formsy的不同方式。
MyInput.js
import React from 'react';
import Formsy from 'formsy-react-2';
export default class MyInput extends Formsy.Mixin {
static defaultProps = {
type: 'text'
}
updateValue = (event) => {
this.setValue(event.target.value);
}
render() {
const {type, ...rest} = this.removeFormsyProps(this.props);
const errorMessage = this.getErrorMessage();
return (
<div>
<input {...rest} type={type} value={this.getValue()} onChange={this.updateValue}/>
<span>{errorMessage}</span>
</div>
)
}
}
MyInputHOC.js
import React from 'react';
import Formsy from 'formsy-react-2';
class MyInputHOC extends React.Component {
updateValue = (event) => {
this.props.setValue(event.target.value);
}
render() {
const errorMessage = this.getErrorMessage();
return (
<div>
<input name={this.props.name} type='text' value={this.props.getValue()} onChange={this.updateValue}/>
<span>{errorMessage}</span>
</div>
)
}
}
export default Formsy.HOC(MyInputHOC);
MyForm.js
import React from 'react';
import Formsy from 'formsy-react-2';
import MyInput from './MyInput';
import MyInputHOC from './MyInputHOC';
// Using your new component
class MyForm extends React.Component {
state = {
formIsValid: false
}
enableSubmit() {
this.setState({formIsValid: true});
}
disableSubmit() {
this.setState({formIsValid: false});
}
submit(model) {
console.log(model);
// model = {
// foo: 'foo@foo.com',
// bar: 10
// }
}
// This code results in a form with a submit button that will run the `submit`
// method when the submit button is clicked with a valid email. The submit button
// is disabled as long as
// - the foo input is empty or the value is not an email; and
// - the bar input is not an integer.
// On validation error it will show the error message.
render() {
return(
<Formsy.Form onValidSubmit={this.submit} onValid={this.enableSubmit} onInvalid={this.disableSubmit}>
<MyInput name='foo' validations='isEmail' validationError='This is not a valid email' required/>
<MyInputHOC name='bar' validations='isInt' validationError='This is not an integer' />
<button type="submit" disabled={!this.state.formIsValid}>Submit</button>
</Formsy.Form>
)
}
}