Question

每次输入字段值更改时，我都需要执行此逻辑：

  let warningMessage = ''

  if (stateData) {
    let list = []
    if (props.values.injured_worker_type === 'Seasonal') {
      list = stateData.calculation_warnings['Seasonal']
    } else {
      list = stateData.calculation_warnings[`FullTime-${props.values.working_days}`]
    }

    const keys = _.keys(list)
    const index = _.findIndex(keys, key => {
      const fromValue = Number(key.slice(1, key.indexOf('-')))
      const toValue = Number(key.slice(key.indexOf('-') + 1, key.length))
      return props.values.total_days_paid >= fromValue && props.values.total_days_paid < toValue
    })

    if (index >= 0) {
      warningMessage = list[keys[index]]
    }
  }

  const message = warningMessage ? (
    <p style={{ color: 'red', fontSize: '0.85rem' }}> {warningMessage} </p>
  ) : null

并通过此逻辑传递此消息以输出：

  const message = warningMessage ? (
   <p style={{ color: 'red', fontSize: '0.85rem' }}> {warningMessage} </p>
  ) : null

当我有该输入字段时，这是JSX（html）部分：

 return (
<Fragment>
  <Form.Group grouped style={{ marginTop: '2rem' }}>
    <label style={{ fontSize: '0.85rem' }}>8. Total days in preceeding 52 weeks:</label>
    <Form.Input
      name="total_days_paid"
      onChange={this.handleChange}
      width="6"
      placeholder="200"
      required
    />
  </Form.Group>

 {/* THIS messeage is result of that logic which I need to 
     be executed every time on changed input */}
      {message}
    </Fragment>

） }

这里是不起作用版本的stackblitz代码： https://stackblitz.com/edit/react-tpk1ik

我如何使它起作用？

Answer 1

您的示例中的代码并没有太大帮助，因为它有错误，即使我安装了缺少的依赖项，它也不会输出任何东西，但是仅阅读它就可以看到一个问题。

当input值更改时，要执行的逻辑需要放在您试图在此处handleChange调用的onChange={this.handleChange}方法中。

作为参考，这些类型的input称为Controled Components，您可以在React Documentation中详细了解它们。

Answer 2

您的代码不符合要求。您在代码中犯了许多错误。

我已更正了所有代码，这是处理程序功能https://react-t3luq3.stackblitz.io的有效解决方案。

index.js

import React from 'react'
import ReactDom from "react-dom";
import Hello from './Hello';

ReactDom.render(<Hello />, document.getElementById("root"));

Hello.js

import React, { Component, Fragment } from 'react'
import { Form } from 'semantic-ui-react'
import _ from 'lodash'

export default class Hello extends Component{

  constructor(props){
    super(props);
  }
  handleChange = e => {
    console.log(e.target.value)
  }

  render(){
  const { stateData } = this.props;

  let warningMessage = ''

  if (stateData) {
    let list = []
    if (props.values.injured_worker_type === 'Seasonal') {
      list = stateData.calculation_warnings['Seasonal']
    } else {
      list = stateData.calculation_warnings[`FullTime-${props.values.working_days}`]
    }

    const keys = _.keys(list)
    const index = _.findIndex(keys, key => {
      const fromValue = Number(key.slice(1, key.indexOf('-')))
      const toValue = Number(key.slice(key.indexOf('-') + 1, key.length))
      return props.values.total_days_paid >= fromValue && props.values.total_days_paid < toValue
    })

    if (index >= 0) {
      warningMessage = list[keys[index]]
    }
  }

  const message = warningMessage ? (
    <p style={{ color: 'red', fontSize: '0.85rem' }}> {warningMessage} </p>
  ) : null
  return (
    <Fragment>
      <Form.Group grouped style={{ marginTop: '2rem' }}>
        <label style={{ fontSize: '0.85rem' }}>8. Total days in preceeding 52 weeks:</label>
        <Form.Input
          name="total_days_paid"
          onChange={this.handleChange}
          width="6"
          placeholder="200"
          required
        />
      </Form.Group>
        {message}
    </Fragment>
  )
}
}

index.html

<html>
  <body>
    <div id="root"></div>
  </body>
</html>

需要帮助以使事件处理程序在React JS中正常工作

2 个答案: