InputNumber 组件

App.js

import React, { useState } from 'react'
import InputNumber from './InputNumber.js'

function App() {
  const [value, setValue] = useState('aaa')
  return (
    <div>
      <div>{value}</div>
      <InputNumber
        value={value}
        onChange={e => {
          setValue(e.target.value)
        }}
        ></InputNumber>
      <InputNumber
        defaultValue={value}
        onChange={e => {
          setValue(e.target.value)
        }}
        ></InputNumber>
    </div>
  )
}

export default App

InputNumber.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'

class InputNumber extends Component {
  constructor (props) {
    super(props)
    this.state = {
      innerValue: ''
    }
  }
  static propTypes = {
    value: PropTypes.string,
    defaultValue: PropTypes.string,
    onChange: PropTypes.func
  }

  isControl () {
    return 'value' in this.props
  }

  get value () {
    if (this.isControl()) {
      return this.props.value
    } else {
      return this.state.innerValue
    }
  }

  render () {
    return (
      <div>
        <input
          value={this.value}
          onChange={e => {
            if (!this.isControl()) {
              this.setState({
                innerValue: e.target.value
              })
            }
            this.props.onChange(e)
          }}
        />
      </div>
    )
  }

  componentDidMount () {
    this.setState({
      innerValue: this.props.defaultValue
    })
  }
}

export default InputNumber