reactjs - 如何在输入标签（这是一个组件）中处理“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属性，它是作为props传递的？autoFocus="on" 或 "of"、autoFocus="true" 或 "false" 不起作用...！。tq 提前。

Answer 1

您可以使用 autoFocus 属性来自动聚焦输入元素，我认为您将 prop 作为字符串传递，尝试为 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来聚焦一个元素，

希望能帮助到你

Answer 2

您可以使用 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;