如何为一个 TextInput 字段设置 3 种不同的操作 react-native with redux

Question

如果文本已更改，我会在我的 TextInput 字段中调用 onChange 操作。它与 redux 一起工作得很好。

但我需要添加更多操作：

onFocuse（如果文本有效负载 === '0'，那么我需要将 TextInput 值更改为 ''）

onBlur（如果文本有效负载 === ''，那么我需要将 TextInput 值更改为 '0'）

我不知道。例如 JQuery 决策：

function addEventOnChange(obj){
jQuery('#'+obj).bind('keyup mouseup change',function(e){
    change(document.getElementById(obj));
});
jQuery('#'+obj).click(
    function(){//focusin
      clears(document.getElementById(obj));
});
jQuery('#'+obj).blur(
    function(){//focusout
      backzero(document.getElementById(obj));
});
function clears(obj) {
    if (obj.value == 0) {
        obj.value = '';
    }
}    
function backzero(obj) {
    if (obj.value == "") {
        obj.value = 0;
    }
}

我当前的操作：

export const textInputChanged = (text) => {
  return {
    type: TEXTINPUT_CHANGED,
    payload: text
  };
};

当前减速器：

const INITIAL_STATE = {
  textinput: '1000' 
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case TEXTINPUT_CHANGED:
      return { ...state, textinput: action.payload };
  default:
      return state;
  }
};

当前应用：

onTextInputChange(text) {
    this.props.TextInputChanged(number(text));
}

render() {
const number = (text) => { // only for numbers input
  if (text.match(',') !== null) {
    text = text.replace(',', '.');
  }
  if (text.match(/[*.*][0-9]*[*.*]/) !== null) {
    if (text.match(/\.$/)) {
      text = text.replace(/\.$/, '');
    } else {
      text = text.replace(/[.]/, '');
    }
  }
  return text.replace(/[^\d.]/g, '');
};

return (
      <Card>
        <TextInput
          value={this.props.texinput}
          onChangeText={this.onTextInputChange.bind(this)}          
          onFocus={ clears }
          onBlur={ backzero }         
         />
       </Card>
const mapStateToProps = (state) => {
  return {
    textinput: state.form.textinput,
  };
};

export default connect(mapStateToProps, {
  TextInputChanged
})(App);

Decision 听起来像 componentDidMount()，但我感觉不太好

Answer 1

它正在工作。某个地方可能是一个更优雅的解决方案。在这个 onFocus && onBlur 函数中，同样的原理可以添加 TextInput2、TextInput3 等。结果是没有eval）

当前应用：

class App extends Component {
  constructor() {
    super();
    this.state = {
         TextInputColor: '#525050'
    };
  }

    onFocus(input, text) {
      this.setState({
        [`${input}Color`]: '#000000'
      });
      if (text === '0') {      
        this.props[`${input}Changed`]('');
      }
    }

   onBlur(input, text) {
       this.setState({
         [`${input}Color`]: '#525050'
       });
       if (text === '') {      
         this.props[`${input}Changed`]('0');
       }
    }

    onTextInputChange(text) {
        this.props.TextInputChanged(number(text));
    }

    render() {

    const number = (text) => { // only for numbers input };

    return (
      <Card>
        <TextInput
          value={this.props.texinput}
          onChangeText={this.onTextInputChange.bind(this)}          
          onBlur={() => this.onBlur('TextInput', this.props.textinput)}
          onFocus={() => this.onFocus('TextInput',this.props.textinput)}
          style={{ color: this.state.TextInputColor }}   
        />
      </Card>
      const mapStateToProps = (state) => {
        return {
          textinput: state.form.textinput,
        };
      };

      export default connect(mapStateToProps, {
        TextInputChanged
      })(App);

Gif

Answer 2

我认为这就是您要寻找的。这也是谷歌的第一个结果。仅供参考..

Focus style for TextInput in react-native

更新....

<TextInput 
    onBlur={ () => this.onBlur() }
    onFocus={ () => this.onFocus() }
    style={{ height:60, backgroundColor: this.state.backgroundColor, color: this.state.color }}  />

onFocus() {
    this.setState({
        backgroundColor: 'green'
    })
  },



 onBlur() {
    this.setState({
      backgroundColor: '#ededed'
    })
  },

我无法为您编写所有代码...您需要设置您的代码。

handleChange(e){
//check if text is what you need then call some function
//e === 0 ? this.onBlur (or this.setState({...})) : null
}