Fatal编程技术网
  • javascript/
  • Javascript 需要帮助使事件处理程序在react js中正常工作吗

Javascript 需要帮助使事件处理程序在react js中正常工作吗

javascript reactjs

Javascript 需要帮助使事件处理程序在react js中正常工作吗,javascript,reactjs,Javascript,Reactjs,我需要在每次更改输入字段值时执行此逻辑： let warningMessage = '' if (stateData) { let list = [] if (props.values.injured_worker_type === 'Seasonal') { list = stateData.calculation_warnings['Seasonal'] } else { list = stateData.calculation_wa

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

  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

let warningMessage=''
if（状态数据）{
让列表=[]
如果（props.values.infected_worker_type===‘季节性’）{
列表=stateData.calculation\u警告['Seasonal']
}否则{
list=stateData.calculation\u警告[`FullTime-${props.values.working\u days}`]
}
const keys=u.keys（列表）
常量索引=uu.findIndex（键，键=>{
const fromValue=Number（key.slice（1，key.indexOf（'-'））
常量toValue=Number（key.slice（key.indexOf（'-'）+1，key.length））
返回props.values.total_days_paid>=fromValue&&props.values.total_days_paid=0）{
警告消息=列表[键[索引]]
}
}
const message=警告消息？(

{warningMessage}

)：null
并向下传递此消息，作为此逻辑的结果输出：

  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>

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

const message=warningMessage？(

{warningMessage}

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

  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>

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

返回(
8.前52周的总天数：
{/*这个混乱是我需要解释的逻辑的结果
每次更改输入时都要执行*/}
{message}
) }

下面是stackblitz中代码的不工作版本：

如何使其工作？

您的示例中的代码没有多大帮助，因为它有错误，即使在我安装缺少的依赖项时，它也不会输出任何内容，但仅从阅读中我可以看到一个问题

当
输入
值更改时要执行的逻辑需要进入您试图在此处调用的
handleChange
方法
onChange={this.handleChange}

作为参考，将调用这些类型的
输入
字段，您可以在中了解更多有关这些字段的信息。

示例中的代码没有多大帮助，因为它有错误，即使我安装缺少的依赖项，它也不会输出任何内容，但仅从阅读中我可以看到问题

当
输入
值更改时要执行的逻辑需要进入您试图在此处调用的
handleChange
方法
onChange={this.handleChange}

作为参考，将调用这些类型的
输入
字段，您可以在中阅读有关这些字段的更多信息。

您的代码不符合标准。您在代码中犯了很多错误

我已经更正了所有代码，下面是处理函数的工作解决方案

index.js

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

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

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

从“React”导入React
从“react dom”导入react dom；
从“./Hello”导入Hello；
render（，document.getElementById（“根”））；
Hello.js

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

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

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

import React，{Component，Fragment}来自“React”
从“语义ui反应”导入{Form}
从“lodash”导入
导出默认类Hello扩展组件{
建造师（道具）{
超级（道具）；
}
handleChange=e=>{
console.log（例如target.value）
}
render（）{
const{stateData}=this.props；
让warningMessage=“”
if（状态数据）{
让列表=[]
如果（props.values.infected_worker_type===‘季节性’）{
列表=stateData.calculation\u警告['Seasonal']
}否则{
list=stateData.calculation\u警告[`FullTime-${props.values.working\u days}`]
}
const keys=u.keys（列表）
常量索引=uu.findIndex（键，键=>{
const fromValue=Number（key.slice（1，key.indexOf（'-'））
常量toValue=Number（key.slice（key.indexOf（'-'）+1，key.length））
返回props.values.total_days_paid>=fromValue&&props.values.total_days_paid=0）{
警告消息=列表[键[索引]]
}
}
const message=警告消息(

{warningMessage}

)：null
返回(
8.前52周的总天数：
{message}
)
}
}
index.html

<html>
  <body>
    <div id="root"></div>
  </body>
</html>
您的代码没有达到标准。您在代码中犯了很多错误

我已经更正了所有代码，下面是处理函数的工作解决方案

index.js

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

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

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

从“React”导入React
从“react dom”导入react dom；
从“./Hello”导入Hello；
render（，document.getElementById（“根”））；
Hello.js

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

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

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

import React，{Component，Fragment}来自“React”
从“语义ui反应”导入{Form}
从“lodash”导入
导出默认类Hello扩展组件{
建造师（道具）{
超级（道具）；
}
handleChange=e=>{
console.log（例如target.value）
}
render（）{
const{stateData}=this.props；
让warningMessage=“”
if（状态数据）{
让列表=[]
如果（props.values.infected_worker_type===‘季节性’）{
列表=stateData.calculation\u警告['Seasonal']
}否则{
list=stateData.calculation\u警告[`FullTime-${props.values.working\u days}`]
}
const keys=u.keys（列表）
常量索引=uu.findIndex（键，键=>{
const fromValue=Number（key.slice（1，key.indexOf（'-'））
常量toValue=Number（key.slice（key.indexOf（'-'）+1，key.length））
返回props.values.total_days_paid>=fromValue&&props.values.total_days_paid=0）{
警告消息=列表[键[索引]]
}
}
const message=警告消息(

{warningMessage}

)：null
返回(
8.前52周的总天数：
{message}
)
}
}
index.html

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