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',
  }  
});

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状态以使两个输入的样式在加载时相同。将用于输入样式中的条件。

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

在多个输入中处理本机响应

1 个答案: