如何为一个文本输入字段与Redux设置3个不同的动作

Question

在我的textInput字段中，如果已更改文本，则调用on Change操作。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);

决策闻起来像componentdidmount（），但我感觉不太感觉

Answer 1

它正在工作。某个地方可能是一个更优雅的解决方案。您可以按照此字体中的相同原则添加textInput2，textInput3等。Onblur功能。事实证明没有评估）

当前应用：

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

我认为这就是您想要的。这也是Google的第一个结果。只是一个fyi ..

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
}