javascript - 自定义日期组件的重构代码

Question

我创建了一个日期组件(底部的工作 GIF)。

代码的工作没有问题，但我写的代码看起来很乱，其他人很难理解。

注意:请看下面的 GIF。另外，忽略样式

这就是我正在做的。对于屏幕中的日期组件，我正在创建这样的引用和状态

class OnBoarding extends PureComponent {
    constructor(props) {
        super(props)
        this.d1 = React.createRef()
        this.d2 = React.createRef()
        this.d3 = React.createRef()
        this.d4 = React.createRef()
        this.d5 = React.createRef()
        this.d6 = React.createRef()
        this.d7 = React.createRef()
        this.d8 = React.createRef()
    }
    state = {
        name: '',
        emailAddress: '',
        dob: '',
        male: null,
        female: null,
        keyboard: false,
        d1: null,
        d2: null,
        d3: null,
        d4: null,
        d5: null,
        d6: null,
        d7: null,
        d8: null
    }

dobHandler(number, flag) {
        const completeFlag = `d${flag}`
        this.setState({[completeFlag]: number})
        flag = flag + 1
        if (flag < 9 && number) {
            const nextFlag = `d${flag}`
            const textInputToFocus = this[nextFlag]
            textInputToFocus.current.focus()
        }
    }

然后像这样渲染它们

       <View style={styles.dob}>
                        <TextInput
                            ref={this.d1}
                            numberOfLines={1}
                            maxLength={1}
                            style={styles.textInputDob}
                            keyboardType="numeric"
                            placeholder="D"
                            onChangeText={number => this.dobHandler(number, 1)}
                        />
                        <TextInput
                            ref={this.d2}
                            numberOfLines={1}
                            maxLength={1}
                            style={styles.textInputDob}
                            keyboardType="numeric"
                            placeholder="D"
                            onChangeText={number => this.dobHandler(number, 2)}
                        />
                        <Text>/</Text>
                        <TextInput
                            ref={this.d3}
                            numberOfLines={1}
                            maxLength={1}
                            style={styles.textInputDob}
                            keyboardType="numeric"
                            placeholder="M"
                            onChangeText={number => this.dobHandler(number, 3)}
                        />
                        <TextInput
                            ref={this.d4}
                            numberOfLines={1}
                            maxLength={1}
                            style={styles.textInputDob}
                            keyboardType="numeric"
                            placeholder="M"
                            onChangeText={number => this.dobHandler(number, 4)}
                        />
                        <Text>/</Text>
                        <TextInput
                            ref={this.d5}
                            numberOfLines={1}
                            maxLength={1}
                            style={styles.textInputDob}
                            keyboardType="numeric"
                            placeholder="Y"
                            onChangeText={number => this.dobHandler(number, 5)}
                        />
                        <TextInput
                            ref={this.d6}
                            numberOfLines={1}
                            maxLength={1}
                            style={styles.textInputDob}
                            keyboardType="numeric"
                            placeholder="Y"
                            onChangeText={number => this.dobHandler(number, 6)}
                        />
                        <TextInput
                            ref={this.d7}
                            numberOfLines={1}
                            maxLength={1}
                            style={styles.textInputDob}
                            keyboardType="numeric"
                            placeholder="Y"
                            onChangeText={number => this.dobHandler(number, 7)}
                        />
                        <TextInput
                            ref={this.d8}
                            numberOfLines={1}
                            maxLength={1}
                            style={styles.textInputDob}
                            keyboardType="numeric"
                            placeholder="Y"
                            onChangeText={number => this.dobHandler(number, 8)}
                        />
                    </View>

我做了这么多 ref 的原因是因为当有人在当前 textInput 中输入内容时，我希望焦点移动到下一个，这发生在 dobHandler 函数中。

有人可以帮助我提高质量/优化，如果这是错误的做法，请提示我如何实现此替代方案

Answer 1

在很多方法中，你可以这样写，

const placeholders = [ 'D', 'D', 'M', 'M', 'Y', 'Y', 'Y', 'Y'];

class OnBoarding extends PureComponent {
  constructor(props) {
    super(props)
    this.refs = Array(8).fill(0).map(_ => React.createRef())
  }

  state = {
    name: '',
    emailAddress: '',
    male: null,
    female: null,
    keyboard: false,
    dob: Array(8).fill(null)
  }

  dobHandler(number, index) {
    const { dob } = this.state
    dob[index] = number;
    this.setState({ dob:  [ ...dob ]})
    const ref = this.refs[index + 1]
    if (number && ref && ref.current)
      ref.current.focus()
  }

  render() {
    <View style={styles.dob}>
      {this.refs.map((ref, i) => (
        <>
          <TextInput
            ref={ref}
            numberOfLines={1}
            maxLength={1}
            style={styles.textInputDob}
            keyboardType="numeric"
            placeholder={placeholders[i]}
            onChangeText={number => this.dobHandler(number, i)}
          />
         {(i == 1 || i == 3) && <Text>/</Text>}
       </>        
      ))}
    </View>
  }
}

因为你有一个重复集，你可以使用数组，同时根据索引有条件地在需要的地方插入斜杠。