当用户输入通过来自另一个组件的道具的文本时，在反应 js 中不起作用

Posted 2023-02-23

【中文标题】当用户输入通过来自另一个组件的道具的文本时，在反应 js 中不起作用

【英文标题】：When user inputs text passing through props from another component not working in react js

【发布时间】：2019-04-30 20:13:39

【问题描述】：

我正在尝试连接在文本字段中输入的数据，使用道具传递来自另一个无状态组件的数据。不知道为什么它不起作用。

我创建了两个组件

app.js 2.title.js 输入字段中输入的数据每次都需要拼接字符串，并使用props动态显示。

App.js

import React,  Component  from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './Home';
import Title from './Title';

class App extends Component 

  constructor(props)
  
    super(props);
    this.state =
    
      text : ' ',
      collection: []
    
    this.eventHandler = this.eventHandler.bind(this);
    this.eventSubmit = this.eventSubmit.bind(this);

  

  eventHandler(event)


  this.setState(
    text:event.target.value
    )


eventSubmit(event)

  this.setState(
    collection:this.state.collection.concat(this.state.text)
    )



  render() 
   return (
      <div className="App">
      <input type="text" onChange =this.eventHandler  />
      <p> this.state.text </p>
      <input type="submit" onClick=this.eventSubmit />  
      <title collection=this.state.collection />
      </div>
    );
  

export default App;

Title.js

import React from 'react';

const title = (props) =>


return (
    <div>
    <h1> this.props.collection.toString() </h1>
    <h1> hello </h1>
    </div>
);

export default title;

【参考方案1】：

setState 是异步的，当您在其中使用 this.state 时，它​​可能不会重新渲染。改用 setState 中的函数：

eventSubmit(event) 
    this.setState((prevState, props) => (
        collection: prevState.collection.concat(prevState.text)
    ));

见 3. setState() 是异步的：https://codeburst.io/how-to-not-react-common-anti-patterns-and-gotchas-in-react-40141fe0dcd

【参考方案2】：

突变通常是不好的，并且可能导致副作用使用扩展运算符（...）来复制 prevState 数组。

eventSubmit(event) 
    this.setState((prevState) => (
        collection: [...prevState.collection, prevState.text]
    ));

这就是你如何在数组中追加数据并更新状态

【参考方案3】：

Instead of stateless component I have created class component and it worked. Can someone explain me why it didn't worked with stateless why it worked now.

App.js

<code>
        import React,  Component  from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './Home';
import Title from './Title';
import Collection from './Collection';

class App extends React.Component 
  constructor(props)
  
    super(props);
    this.state =
    
      text : ' ',
      collection: []
    
    this.eventHandler = this.eventHandler.bind(this);
    this.eventSubmit = this.eventSubmit.bind(this);  
  

eventHandler(event)

this.setState(
text:event.target.value
    )

eventSubmit(event)

  this.setState(
    collection:this.state.collection.concat(this.state.text)
   )


  render() 
    return (
      <div className="App">

      <h1> ramesh </h1>
      <input type="text" onChange =this.eventHandler  />
      <p> this.state.text </p>
      <input type="submit" onClick=this.eventSubmit />  
      <title name =this.state.collection />
      <Collection name=this.state.collection />
      </div>
    );
  

export default App;

</code>

Collection.js

<code>
import React, Component from 'react';

class Collection extends React.Component

    render()
    
        return( 

            <div>
            <h1> this.props.name.toString() </h1>
            </div>

         );
    

export default Collection;
</code>