javascript - 如何在反应中利用子组件中的状态值

Question

我正在尝试找到可以利用子组件中状态值的最佳方法。这个想法是创建一个设置组件，其状态可以通过用户输入进行更新，然后可以使用此更新的值来更改另一个组件中某些计算的结果。我已经尝试过 Redux，但我不能让它工作。

我有一个收集用户数据的表格

 class SettingModal extends Component {
     constructor(props){
      super(props);
       this.state={
           open:false,
           value: '',
       }
     }
     handleChange(e) {
      this.setState({value: e.target.value}, () =>
        this.props.valueDispatcher(this.state.value),
      )
    }

    render() {
        const { open } = this.state;
    return (
      <>
        <Button variant="link"
                className="promo-code-button"

          onClick={() => this.setState({ open: !open })}
          aria-controls="example-collapse-text"
          aria-expanded={open}
        >
         {open === false? <Button

color="primary"
block
className="btn-round"
         >
Overtime rate Settings
         </Button>:<Button
         color="primary"
         block
         className="btn-round"
         >
             Close overtime Settings
             </Button>} 


        </Button>

         <Collapse in={open}>
         <div id="example-collapse-text">
         <Row className="show-grid">
         <Col md={12}>
         <Form>
  <Form.Group controlId="formInlineName">
    <Form.Label>Enter overtime rate and click apply...</Form.Label>
    <Form.Control type="text" placeholder="type here" 
 value={this.state.value}
 onChange={this.handleChange.bind(this)}
    />
    <Form.Text className="text-muted">

    </Form.Text>
  </Form.Group>
  <Button
  block
  variant="success"

  disabled={this.props.isDisabled}
  onClick={this.props.giveDiscount}
  >Apply</Button>
  </Form>
         </Col>


         </Row>


         </div>

         </Collapse>

        </>
   );
}
}

这是一个调度组件

import { React, useState, useCallback} from 'react';
import WagesSettingModal from './WagesSettingModal';
import WagesCalculator7 from './WagesCalculator7';

function OvertimeRateValue (props) {
  const [value, setValue] = useState('Initial')

  const handleChange = useCallback(e => setValue(e.target.value), [])

  return (
    <div>
      < WagesSettingModal valueDispatcher={setValue} />
      <WagesCalculator value={value}/>
    </div>
  )
}


export default OvertimeRateValue;

最后，我在这里利用了这个价值

import React from 'react'
Imported above component from './above component'

 renderTable() {


    var totalCount = 0;
    var shownCount = 0;
    var lowerBound = 0;
    var upperBound = 0;
    var filtered = [];

    filtered = this.state.data.map( (row, i,) => {
      if(row.department.toLowerCase().indexOf(this.state.departmentFilter) > -1){
        return (
          <tr key={"employeeData"+i}>
            <td>{i+1}</td>

            <td>{row.name}</td>
            <td>{row.numberofPresentAttendances}</td>
            <td>{row.department}</td>
            <td>{row.wages}</td>


            <td>
            <Link to={"/employee/overtime/"+row._id}>
                <Button className="btn btn-light"><Overtime/></Button>
              </Link>

            </td>
            <td>{row.overtime}</td>
            <td>{row.totalWages}</td>
            <td>


              {row.overtime<1? row.numberofPresentAttendances * row.wages* 8
            : row.numberofPresentAttendances * [row.wages* 8]+[row.wages*<above component/>]*row.overtime}

            </td>



            <td>


            </td>
          </tr>
        );

我的目标是能够通过改变用户输入的数字来改变计算结果的结果

标签： javascriptreactjsredux