Question

可能像示例一样触发事件：

const Tet = (props) => {

    return (
        <div>
            <label>id:<input onChange= **FIRED RR METHOD** type="text"/></label>
        </div>
    );
}

我的组件

 class TContainer extends React.Component {

 rr(obj, ev) {
        console.log(obja, ev.target.value));    
 }
 render() {
    return (
      <Tet lala={this.state.dataList} rr={this.rr.bind(this)}/>
    )
 }

如何使用event.target.value调用方法并传递普通的attr。

Answer 1

如果您只想传播道具，最简单的方法是：

const Tet = ({ onChange }) => {
  return (
    <div>
      <input type="text" onChange={onChange} />
    </div>
  )
}

class TetContainer extends React.Component {
  constructor() {
    super()

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
     console.log(event.target.value)
  }

  render() {
    return <Tet onChange={this.handleChange} />
  }
}

ReactDOM.render(
  <TetContainer />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="root"></div>

Answer 2

如果你想传递自定义参数，那么将一个新函数传递给onchange，用你的自定义参数调用你的rr函数

const Tet = (props) => {

    return (
        <div>
            <label>id:<input onChange={(e) => {props.rr(obj,e)}} type="text"/></label>
        </div>
    );
}

与其他组件一起输入时触发的方法与事件

2 个答案: