reactjs - 从不同文件中的类调用函数

问题描述

我基本上是在尝试从不同文件中的类（时间）调用函数（getValue），但存在一些问题。

这是两个文件的代码：

时间.js

export default class Time extends Component {
constructor(props) {
    super(props); 
    this.state = {
        input: '',
        input2: '', 
        checked: false
    }
    this.getValue = this.getValue.bind(this);
}

hrChange = e => {
    this.setState({input: e.target.value}, function () {this.getValue()})
}

minChange = e => {
    this.setState({input2: e.target.value}, function () {this.getValue()})
}

amPm = () => {
    this.setState({checked: !this.state.checked}, function () {this.getValue()}) 
}

getValue = () => {
    const list = [
        this.state.input, 
        this.state.input2, 
        this.state.checked  
    ]
    return (list)
}

render() {
    return(
        <text>some stuff</text>
    )
}
}

新存储.js

function NewStorage() {
const time = () => {
    var obj = new Time();
    var list = obj.getValue()
    const 
        hrInput = list[0], 
        minInput = list[1], 
        pm = list[2]

    return(
        console.log(hrInput, minInput, pm, list)
    )

return(
    time()
)
}

export default NewLocalStorage;

主要问题不是不能调用函数，而是调用函数时，input、input2、checked的值都是原值（''、''、false），而不是更新版本（例如：'11'、'30'、true）。

我不确定如何解决这个问题。

标签： reactjsreact-nativereact-hooks

您包含react-hooks标签表明您的预感是钩子适用于解决您的问题。我同意——

const { useState, useEffect } = React

function Time ({ hour, minute, onChange }) {
  const [h,setHour] = useState(hour)
  const [m,setMinute] = useState(minute)
  useEffect(_ => onChange({ hour: h, minute: m }), [h, m])
  return <div>
    <input value={h} onChange={event => setHour(event.target.value)} />
    <input value={m} onChange={event => setMinute(event.target.value)} />
  </div>
}

ReactDOM.render(<Time onChange={console.log} />, document.querySelector("main"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<main></main>

在更复杂的示例中，我们可以使用Time组件的onChange回调来更新父组件中的嵌套状态，MyForm-

const { useState, useEffect, useCallback } = React

function Time ({ hour = 0, minute = 0, onChange }) {
  const [h,setHour] = useState(hour)
  const [m,setMinute] = useState(minute)
  useEffect(_ => onChange({ hour: h, minute: m }), [h, m, onChange])
  return <div>
    <input value={h} onChange={event => setHour(event.target.value)} />
    <input value={m} onChange={event => setMinute(event.target.value)} />
  </div>
}

function MyForm () {
  const [data, setData] = useState({ time: { hour: 5, minute: 30 }, foo: "bar" })
  const onTimeChange = useCallback(t => setData({ ...data, time: t }), [])
  return <form>
    <Time hour={data.time.hour} minute={data.time.minute} onChange={onTimeChange} />
    <pre>{JSON.stringify(data, null, 2)}</pre>
  </form>
}

ReactDOM.render(<MyForm />, document.querySelector("main"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<main></main>

reactjs - 从不同文件中的类调用函数 - React

问题描述

解决方案

推荐阅读