使用setState()反应输入元素的onChange不起作用

时间:2019-11-14 01:52:50

标签: reactjs events onchange

我想制作一个应用程序,以便在输入元素中键入文本时能够反映出输出的变化。到目前为止,更新不起作用:(


def trackChaned(x):
  pass

cv2.namedWindow('Thresh')

cv2.createTrackbar("Thresh Value", "Thresh",0,255,trackChaned)
cv2.createTrackbar("Dilation Value", "Thresh", 0,50,trackChaned)
img = cv2.resize(img, (0,0), fx=0.3, fy=0.3)

while(True):
   threshValue = cv2.getTrackbarPos("Thresh Value", "Thresh")
   dilationValue = cv2.getTrackbarPos("dilation Value", "Thresh")

   ret,thresh1 = cv2.threshold(img,threshValue,255,cv2.THRESH_BINARY)
   gray = cv2.cvtColor(thresh1,cv2.COLOR_BGR2GRAY)
   ret, thresh1 = cv2.threshold(gray,0,255,cv2.THRESH_BINARY_INV+cv2.THRESH_OTSU)

   kernal = np.ones((2,2), np.uint8)
   dilation = cv2.dilate(thresh1, kernal, iterations= dilationValue)
   cv2.imshow("threshValue",thresh1)
   if cv2.waitKey(1) == 27:
       break

cv2.destroyAllWindows()

cv2.imshow('Test', thresh1)
cv2.waitKey(0)

gray = cv2.cvtColor(thresh1,cv2.COLOR_BGR2GRAY)
ret, thresh = cv2.threshold(gray,0,255,cv2.THRESH_BINARY_INV+cv2.THRESH_OTSU)

cv2.imshow('Test', thresh)
cv2.waitKey(0)

在输入元素中键入的文本更改应反映为UserOutput中呈现的用户名。这不起作用。

以下是其他组件的代码...

import React, { Component } from 'react';
import './App.css';
import UserInput from './UserInput/UserInput';
import UserOutput from './UserOutput/UserOutput';

class App extends Component {
  state = {
    user: [
      { username: 'Kai' },
      { username: 'Orange' }
    ]
  }

  inputChangeHandler = (e) => {
    this.setState(
      {
        user: [
          { username: e.target.value },
          { username: e.target.value }
        ]
      }
    )
  }

  render() {
    return (
      <div className="App">
        <UserInput onChange={this.inputChangeHandler} />
        <UserOutput username={this.state.user[0].username} />
        <UserOutput username={this.state.user[1].username} />
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

class UserInput extends Component
{
    render() {
        return(
            <div>
                <input />
            </div>
        );
    }
}

export default UserInput;

1 个答案:

答案 0 :(得分:0)

好,那是你的问题。您没有将变更处理程序分配给UserInput组件中的input元素。应该是:

<input onChange={this.props.onChange} />
相关问题