Question

我目前正在使用react js进行验证，我正在使用材料ui进行验证。所以我有一个共同的组件，我将拥有所有验证逻辑。我已经在我的公共组件中设置状态以获取所有字段值，并且我需要在我的子组件中使用这些值，并且我想在子组件中单击按钮提交handleSubmit（）来验证每个字段。你能告诉我如何实现这个目标吗？在我的父组件下面：

    export default class CommonTextBox extends React.Component {

      constructor(props) {
        super(props);

        this.state = {
          firstName:'',
          email:'',
          floatingLabel: '',
        };
        this.handleChange = this.handleChange.bind(this);
      }
      handleChange(evt) {
        if (this.props.name === 'a') {
          this.setState({ firstName: evt.target.value });
        } else if (this.props.name === 'b') {
          this.setState({ email: evt.target.value });
        }
      }
      render() {
        return (
          <div>
            <TextField maxLength='40' errorText='' floatingLabelText={this.state.floatingLabel} onChange={this.handleChange} />
          </div>
        );
      }
    }

Below my child component:

export default class PhysicianDetails extends React.Component {
  constructor(props) {
    // alert(1)
    super(props);
    this.state = {
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit() {
    }
  render() {
    return (
      <div>
        <CommonTextBox name='a' />
        <CommonTextBox name='b' />
        <RaisedButton label='Save' onClick={this.handleSubmit} />
      </div>
    );
  }
}

Answer 1

在父组件中写入验证功能。使用道具将函数传递给child。

如何将数据从父组件传递到子组件并验证react js material ui中的字段？

1 个答案: