如何为一个TextInput字段设置3个不同的操作与redux本地反应

In my TextInput field I called onChange action if text has been changed. It works very fine with redux.

在我的TextInput字段中,如果文本已更改,我调用onChange操作。使用redux可以很好地工作。

But i need to add more actions:

但我需要添加更多操作:

onFocuse (if text payload === '0', then i need to change TextInput value to '')

onFocuse(如果文本有效负载==='0',那么我需要将TextInput值更改为'')

onBlur (if text payload === '', then i need to change TextInput value to '0')

onBlur(如果文本有效负载==='',那么我需要将TextInput值更改为'0')

I don't have any idea. For example JQuery decision:

我什么都不知道。例如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;
    }
}

My current action:

我目前的行动:

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

Current reducer:

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;
  }
};

Current App:

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 smells like componentDidMount(), but I don't feel as well

决定闻起来像componentDidMount(),但我感觉不太好

2 个解决方案

#1

It's working. Somewhere may be a more elegant solution. You can add TextInput2, TextInput3, etc. by the same principle in this onFocus && onBlur functions. It turned out without eval)

它的工作原理。某处可能是更优雅的解决方案。您可以在此onFocus && onBlur函数中使用相同的原理添加TextInput2,TextInput3等。事实证明没有评估)

Current App:

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

#2

I think this is what you're looking for. It was also the first result from google. Just an FYI..

我想这就是你要找的东西。这也是谷歌的第一个结果。只是一个FYI ..

Focus style for TextInput in react-native

反应原生的TextInput焦点样式

Update....

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

I can't write all the code for you... You will need to setup your code.

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

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