【问题标题】:ReactJS, call two functions onChange eventReactJS,调用两个函数onChange事件
【发布时间】:2018-03-27 14:59:16
【问题描述】:

我试图在 onChange 事件中调用两个函数。

这是我的代码:

onChange(e){
   const re = /^[0-9\b]+$/;
   if (e.target.value == '' || re.test(e.target.value)) {
      this.setState({value: e.target.value})
   }
}

<input 
  type="text" 
  size="3" 
  defaultValue={ViewHelpers.toFixed(val1, 2)} 
  onChange={(e) => {
    this.handleValueChanges(this.props.valCols[i]);
    this.onChange
  }}
/>

我无法调用这两个函数

【问题讨论】:

  • 第二个好像不是函数调用,试试最后加()
  • 这个问题没有说明不接受字符。您的问题是为什么没有调用该函数。这已经回答了很多次了。您应该接受一个答案并提出一个关于如何在输入中不允许字符的新问题。
  • 不相关,但如果您将 this.handleValueChanges(this.props.valCols[i]) 放在被调用的 onChange 函数内,您的代码可能会更简洁。在那里阅读它比嵌入 HTML 更容易。

标签: reactjs


【解决方案1】:

我认为你需要调用第二个函数(执行它):

<input 
  type="text" 
  size="3" 
  defaultValue={ViewHelpers.toFixed(val1, 2)} 
  onChange={(e) => {
    this.handleValueChanges(this.props.valCols[i]);
    this.onChange(e);
  }}
/>

【讨论】:

  • 我试过这个检查我更新的问题它允许文本是我的问题
【解决方案2】:

第二个函数没有括号。你也错过了分号。

<input
  type="text"
  size="3"
  defaultValue={ViewHelpers.toFixed(val1, 2)}
  onChange={(e) => {
    this.handleValueChanges(this.props.valCols[i]);
    this.onChange();
 }}/>

【讨论】:

  • 我试过这个检查我更新的问题它允许文本是我的问题
【解决方案3】:

您可以在 this.onChange 处理程序中调用 this.handleValueChanges。在您输入的onChange 属性中,您需要绑定您的this.onChange 并传入this.props.valCols[i] 值:

onChange(value, e){
    this.handleValueChanges(value);
    const re = /^[0-9\b]+$/;
    if (e.target.value == '' || re.test(e.target.value)) {
        this.setState({value: e.target.value})
    }
}

<input 
    type="text"
    size="3" 
    defaultValue={ViewHelpers.toFixed(val1, 2)} 
    onChange={this.onChange.bind(this, this.props.valCols[i])}
/>

编辑 如果您不想只允许文本和数字,则应使用number 输入而不是text 输入:

<input 
    type="number"
    size="3" 
    defaultValue={ViewHelpers.toFixed(val1, 2)} 
    onChange={this.onChange.bind(this, this.props.valCols[i])}
/>

【讨论】:

  • 我试过这个检查我更新的问题它允许文本是我的问题
  • @MyTest 更新了答案。请查看。
  • @MyTest 检查我的编辑。如果您不想允许字符,则应使用数字输入。
  • 是的,我看到了,但我不想改变类型
猜你喜欢
  • 1970-01-01
  • 2019-05-30
  • 2016-05-27
  • 2019-08-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-07-16
  • 2019-02-28
相关资源
最近更新 更多