Question

我想在单击按钮时将文本框值传递给同级组件。我有一个名为 App.js 的父组件。并且 App.js 有两个子组件，分别称为 TextComponent.js 和 TableComponent.js 。

我想在单击按钮时将 TextComponent.js 值传递给 TableComponent.js 。这两个组成部分是同级。这是我的代码。

App.js

<h3 class="heading">Heading 3 </h3>
<h3 class="heading bold"> Heading 3 </h3>
<h3 class="heading"> Heading 3 </h3>
<h3 class="heading"> Heading 3 </h3>
<h3 class="heading bold underline"> Heading 3 </h3>
<h3 class="heading lite"> Heading 3 </h3>
<h3 class="heading"> Heading 3 </h3>

TextComponent.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import TextComponent from './TextComponent'
import TableComponent from './TableComponent'
import VAL from './TextComponent'
class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldVal: ""
    }
 }

 onUpdate = (val) => {
   this.setState({
     fieldVal: val
   })
 };

 render() {
   return (
    <div className="App">
      <TextComponent onUpdate={this.onUpdate}></TextComponent>
      <br />
      <TableComponent passedVal={this.state.fieldVal}></TableComponent>
   </div>
  );
}

}
export default App;

TableComponent.js

import React from 'react';
import { Button, Form, FormGroup, Input, Label } from 'reactstrap';

class TextComponent extends React.Component {

 constructor(props) {
   super(props);

   this.state = {
     fieldVal: ""
   }
   this.update = this.update.bind(this);
 }

 update = (e) => {
   console.log(e.target.value);
   this.props.onUpdate(e.target.value);
   this.setState({fieldVal: e.target.value});
 };

 render() {
   return (
     <Form >
       <FormGroup >
         <Label for="Text" >
           Enter Text
         </Label>
         <Input
           type="text"
           name="text"
           placeholder="Eneter Text"
           value={this.state.fieldVal}
         />
         <Button onClick={this.update}>Save Details</Button>
       </FormGroup>
     </Form>
   );
 }
}
export default TextComponent;

我不知道该怎么做。我对React很陌生。

Answer 1

您需要在onChange上进行一次Input事件，

<Input
    type="text"
    name="text"
    placeholder="Eneter Text"
    value={this.state.fieldVal}
    onChange={this.onChangehandler}
/>

并且onChangehandler函数应该是

onChangehandler = (e) =>{
  this.setState({fieldVal: e.target.value})
}

最后，您的update函数应该是

update = () => {
   this.props.onUpdate(this.state.fieldVal);
}

Answer 2

您必须更改TextComponent.js和App.js中的代码。

TextComponent.js

import React from 'react';
import { Button, Form, FormGroup, Input, Label } from 'reactstrap';

class TextComponent extends React.Component {

 constructor(props) {
   super(props);

   this.state = {
     fieldVal: ""
   }
   this.update = this.update.bind(this);
 }

 update = (e) => {
   console.log(e.target.value);
   this.props.onUpdate(e.target.value);
   this.setState({fieldVal: e.target.value});
 };

 render() {
   return (
     <Form >
       <FormGroup >
         <Label for="Text" >
           Enter Text
         </Label>
         <Input
           type="text"
           name="text"
           placeholder="Eneter Text"
           value={this.state.fieldVal}
         />
         <Button onClick={() => this.props.onUpdate(this.state.fieldVal)}>Save Details</Button>
       </FormGroup>
     </Form>
   );
 }
}
export default TextComponent;

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import TextComponent from './TextComponent'
import TableComponent from './TableComponent'
import VAL from './TextComponent'
class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldVal: ""
    }
 }

 onUpdate = (val) => {
   this.setState({
     fieldVal: val
   })
 };

 render() {
   return (
    <div className="App">
      <TextComponent onUpdate={(val) => this.onUpdate(val)}></TextComponent>
      <br />
      <TableComponent passedVal={this.state.fieldVal}></TableComponent>
   </div>
  );
}

}
export default App;

在单击按钮时如何将文本框值传递给同级组件

2 个答案: