Как обработать атрибуты «autoFocus» и «required» во входном теге (который является компонентом)?

Question

class Inputfield extends Component {
    render() { 
        return ( 
            <>
                <label className={classNames('textfield-outlined', this.props.className)}>
                    <input 
                      name={this.props.name}
                      value={this.props.value}
                      type={this.props.type} 
                      placeholder=" " 
                      onChange={this.props.onChange}
                      autoComplete={ this.props.autoComplete ? "on" : "off"}
                      />
                    <span>{this.props.label}</span>
                </label>
            </>
         );
    }
}

Inputfield.defaultProps={
   type:"text",
   label:"Enter the name of field",
   autoComplete: true,
}

Inputfield.propTypes={
    name: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    className: PropTypes.string,
    onChange: PropTypes.func,
    autoComplete: PropTypes.bool
}

это компонент ввода, как обрабатывать атрибут autoFocus в этом компоненте, который передается как реквизит? autoFocus = "on" или "of", autoFocus = "true" или "false" не работает ...!. tq заранее.

Answer 1

Вы можете использовать ref для ввода.

import React, { Component } from "react";
import PropTypes from "prop-types";
import classNames from "classnames";

class Inputfield extends Component {
  inputRef = React.createRef();

  componentDidMount() {
    if (this.props.autoFocus) {
      this.inputRef.focus();
    }
  }

  render() {
    return (
      <>
        <label
          className={classNames("textfield-outlined", this.props.className)}
        >
          <input
            name={this.props.name}
            value={this.props.value}
            type={this.props.type}
            placeholder=" "
            onChange={this.props.onChange}
            autoComplete={ this.props.autoComplete ? "on" : "off"}
            required={this.props.required}
            ref={ref => (this.inputRef = ref)}
          />
          <span>{this.props.label}</span>
        </label>
      </>
    );
  }
}

Inputfield.defaultProps = {
  type: "text",
  label: "Enter the name of field",
  autoComplete: true
};

Inputfield.propTypes = {
  name: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  className: PropTypes.string,
  onChange: PropTypes.func,
  autoComplete: PropTypes.bool,
  required: PropTypes.bool,
  autoFocus: PropTypes.bool
};

export default Inputfield;

Answer 2

Вы можете использовать атрибут autoFocus для ввода элемента автофокуса, я думаю, что вы передаете опору в виде строки, попробуйте передать булево значение для autoFocus и использовать его следующим образом

return ( 
        <>
            <label className={classNames('textfield-outlined', this.props.className)}>
                <input 
                  name={this.props.name}
                  value={this.props.value}
                  type={this.props.type} 
                  placeholder=" " 
                  onChange={this.props.onChange}
                  autoComplete={ this.props.autoComplete ? "on" : "off"}
                  autoFocus={this.props.autoFocus ? true : false} // boolean value
                  />
                <span>{this.props.label}</span>
            </label>
        </>
     );

Вы также можете использовать Ref для фокусировки элемента,

Надеюсь, это поможет