react-native - 通过多个输入处理本机反应中的焦点

Question

我希望仅在触发 onFocus 时切换其中一个输入的焦点状态，而不是切换两者。

由于两个输入都具有“onFocus”和“onBlur”事件，我希望状态仅更新当前聚焦的元素。

我应该使用 refs 而不是 state 来处理这种事件吗？

class SignInScreen extends Component {

state = {
  isFocused: false,
  style: {
    inputContainer: styles.input
  }
}

onFocus = () => {

    if(!this.state.isFocused) {
      this.setState({
        isFocused: true,
        style: {
          inputContainer: styles.inputDifferent
        }
      })
    }
  }
  onBlur = () => {
    if(this.state.isFocused) {
      this.setState({
        isFocused: false,
        style: {
          inputContainer: styles.input
        }
      })
    }
}
render() {
    return (
      <Input
            containerStyle={[styles.input, this.state.style.inputContainer]}      
            onFocus={this.onFocus}
            onBlur={this.onBlur}
          />
          <Input
            containerStyle={[styles.input, this.state.style.inputContainer]}
            onFocus={this.onFocus}
            onBlur={this.onBlur}
          />
    )
  }
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: 'white,
    marginBottom: 16,
    maxWidth: '90%',
    marginLeft: 'auto',
    marginRight: 'auto'
  },
  inputDifferent: {
    backgroundColor: 'gray',
  }  
});

标签： react-nativestate

Answer 1

像这样修改你的代码：

编辑：

    class SignInScreen extends Component {

  state = {
    isFocused: false,
    firstLoad: true

  }   

  onFocus = () => {
        this.setState({
          isFocused: !this.state.isFocused,
          firstLoad: false
        })
    }

  render() {
    const {isFocused} = this.state
      return (
        <View>
        <Input
              containerStyle={isFocused || firstLoad ? styles.input : styles.inputDifferent}      
              onFocus={this.onFocus}
            />
            <Input
              containerStyle={!isFocused  || firstLoad ? styles.input : styles.inputDifferent}
              onFocus={this.onFocus}
            />
         </View>
      )
    }
  }

  const styles = StyleSheet.create({
    input: {
      borderWidth: 1,
      borderColor: 'white',
      marginBottom: 16,
      maxWidth: '90%',
      marginLeft: 'auto',
      marginRight: 'auto'
    },
    inputDifferent: {
      backgroundColor: 'gray',
    }  
  });

没有必要在状态中包含样式。最好只使用 this.state.isFocus 来简化代码。只是用它来确定输入将使用什么样式。

你也可以忽略 onBlur。因为我们所需要的条件就是专注。

这里的关键因素是使状态切换的感叹号。

已编辑：添加了 firstLoad 状态以使两个输入的样式在加载时相同。将用于输入样式内的条件。

注意：它只能与两个输入一起使用