如何创建动态输入类型组件

Question

我正在开发一个动态组件，其中输入可以用于几种类型： text ， password ， number ， date等。想法是使用此输入，无论类型和实现方式，只要其适应性。 我认为使用状态是个好主意，但我不知道如何做到这一点。 有什么想法吗？

import React, { Component } from 'react';
import './styles.css';

export default class InputField extends Component {
constructor(props) {
    super(props);

    this.state = {
        name: '',
        password: false,
        type: ''
    }
}

render () {
    return (
        <div>
            <label className='f-size'>{this.state.name}</label>
            <input 
                className='input'
                name={this.state.name}
                placeholder={this.state.name}
                value={this.props.value}
                type={this.state.type}
                onChange={this.props.onChange}
            />
            <span className="errorMessage">{this.props.error}</span>
            <span className="errorMessage">{this.props.missField}</span>

        </div>

    )
}
}

谢谢！

Answer 1

我个人认为你应该通过道具来控制它，因为这个值只对Input的父级有意义。

我用过这个

const InputField = ({
  name,
  placeholder,
  value,
  type,
  onChange,
  error,
  missField
}) => (
  <div>
    <label className="f-size">{name}</label>
    <input
      className="input"
      name={name}
      placeholder={placeholder}
      value={value}
      type={type}
      onChange={onChange}
    />
    <span className="errorMessage">{error}</span>
    <span className="errorMessage">{missField}</span>
  </div>
);

父组件：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }
  state = {
    value: '',
    password: '',
  };

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
  render() {
    return (
      <div className="App">
        <InputField
          value={this.state.value}
          type="number"
          name="value"
          onChange={this.handleChange}
        />
        <InputField
          value={this.state.password}
          type="password"
          name="password"
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

Code Sandbox： https ： //codesandbox.io/s/y4ljv75k9

编辑使用无状态组件。 不确定您是否希望状态处理错误消息，但从您的示例中，这是一个有效的解决方案。

Answer 2

<InputField type="text" />
<InputField   type="password" />

<input 
  className='input'
  name={this.state.name}
  placeholder={this.state.name}
  value={this.props.value}
  type={this.props.type}
  onChange={this.props.onChange}
  />

我会使用props来改变类型并管理组件。 然后，您可以从表单定义控制组件

Answer 3

你应该使用不是状态的道具，所以你可以通过

<InputType type="text" />
<InputType type="password" />
<InputType type="number" />

而对于其他参数，你也可以使用道具。

Answer 4

您可以使用this.props.type但标准的jsx输入组件已经是动态的，您可以从下面的示例中看到：

 var root = document.getElementById('root'); class InputField extends React.Component { render() { return ( <div> <input type={this.props.type} /> </div> ) } } class App extends React.Component { render() { return ( <div> <input type='date' /> <InputField type='password'/> </div> ) } } ReactDOM.render(<App />, root) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='root'></div> 

您是否有理由想使用自定义输入组件？