React 可選擇性的使用自有 state 或者 props 元件

我想做一個(gè)如果有 props有value傳入，就使用 props的value，沒有傳入的話，就使用自有狀態(tài)的 <MyInput /> 元件代碼如下

import React from 'react';

export default class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: (typeof this.props.value === 'string') ? this.props.value : ''
    }
  }
  componentWillReceiveProps(nextProps) {
    if ((typeof this.props.value === 'string') ? this.props.value : '') {
      this.setState({ value: nextProps.value })
    }
  }

  handleChange = (e) => {
    if (this.props.onChange) {
      this.props.onChange(e);
    } else {
      this.setState({ value: e.target.value });
    }

  }
  handleClick = (e) => {
    if (this.props.onClick) {
      this.props.onClick(e);
    } else {

    }
  }

  render() {
    return <input value={this.state.value} onClick={this.handleClick} onChange={this.handleChange} />
  }
}

但我認(rèn)為這樣的代碼有點(diǎn)冗長，似乎考慮不周，請問有沒有這種元件的比較好的寫法可以推薦呢？

回答

編輯回答

苦妄

首先，不要在constructor()方法中，使用this.props，這個(gè)寫法在IE下無法兼容。

其次，componentWillReceiveProps()方法，將會(huì)廢棄。

可以做如下的修改：

  render() {
    const {value = this.state.value} = this.props;
    return <input value={value} />
  }

你的需求是項(xiàng)目中最常見的使用方式:

import React from 'react';

export default class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (e) => {
    if (this.props.onChange) {
      this.props.onChange(e);
    } else {
      this.setState({ value: e.target.value });
    }

  }
  handleClick = (e) => {
    if (this.props.onClick) {
      this.props.onClick(e);
    } else {

    }
  }

  render() {
    const {value = this.state.value} = this.props;
    return <input value={value} onClick={this.handleClick} onChange={this.handleChange} />
  }
}

2018年5月15日 17:37

編輯回答

祉小皓

import React from 'react';

export default class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    }
  }


  handleChange = (e) => {
    if (this.props.onChange) {
      this.props.onChange(e);
    } else {
      this.setState({ value: e.target.value });
    }

  }
  handleClick = (e) => {
    if (this.props.onClick) {
      this.props.onClick(e);
    } else {

    }
  }

  render() {
    return <input value={(typeof this.props.value === 'string') ? this.props.value :this.state.value} onClick={this.handleClick} onChange={this.handleChange} />
  }
}

2018年3月26日 18:57