Question

父组件：

import React from "react";
import InputRow from "./InputRow";

const Bid: React.FunctionComponent = () => {
const inpVal = (d:string) => {
}

return (
<div style={{ display: "none" }} className="bid-container animated zoomIn" id="bid-modal">
  <p>Mortage</p>
  <div className="bid-row-container">
    <p>Enter your bid</p>
    <div className="bid-row">
      <InputRow bid="Bid" inpVal={(inpVal: string)=>{console.log(inpVal)}} />
    </div>
  </div>
</div>
);
};

export default Bid;

子组件：

import React from "react";

interface Props{
bid: string,
inpVal: (inpVal:string) => void;
}

const InputRow: React.FunctionComponent<Props> = (bid, inpVal) => {


 return (
<div className="input-row">
  <div>
    <input type="text"  onChange={(e) => { inpVal(e.target.value) }} />
    <p>Rate</p>
  </div>

  <button className="bid-btn">{bid.bid}</button>
</div>
);
};

 export default InputRow;

我正在尝试将输入值从子组件传递到父组件，但是会引发错误。

TypeError：inpVal不是函数。

Answer 1

使用props函数传递值

How to pass data from child component to its parent in ReactJS?

父母：

<div className="col-sm-9" >
     <SelectLanguage onSelectLanguage={this.handleLanguage}/> 
</div>

孩子：

handleLangChange = () => {
    var lang = this.dropdown.value;
    this.props.onSelectLanguage(lang);            
}

Answer 2

您需要将参数包装在{}中，这将从bid对象中提取inpVal和props

const InputRow: React.FunctionComponent<Props> = ({ bid, inpVal }) => {...}

如何在React TypeScript中将输入值从子级传递到父级

2 个答案: