Javascript 当用户通过道具从另一个不在react js中工作的组件输入文本时

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

我创建了两个组件

app.js2。title.js 输入字段中输入的数据需要每次压缩字符串，并使用道具动态显示

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;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./主页”导入主页；
从“./Title”导入标题；
类应用程序扩展组件{
建造师（道具）
{
超级（道具）；
这个州=
{
文本：“”，
收藏：[]
}
this.eventHandler=this.eventHandler.bind（this）；
this.eventSubmit=this.eventSubmit.bind（this）；
}
事件处理程序（事件）
{
这是我的国家(
{text:event.target.value}
)
}
事件提交（事件）
{
这是我的国家(
{collection:this.state.collection.concat（this.state.text）}
)
}
render（）{
返回(
{this.state.text}

);
}
}
导出默认应用程序；

Title.js

import React from 'react';

const title = (props) =>
{

return (
    <div>
    <h1> {this.props.collection.toString()} </h1>
    <h1> hello </h1>
    </div>
);
}
export default title;

从“React”导入React；
常量标题=（道具）=>
{
返回(
{this.props.collection.toString（）}
你好
);
}
导出默认标题；

---

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

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

---

见3。setState（）是异步的：

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

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

这就是在数组中附加数据并更新状态的方式，而不是无状态组件。我创建了类组件，它工作了。有人能解释一下为什么它不适用于无状态系统，为什么它现在适用。

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>

App.js

从“React”导入React，{Component}；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./主页”导入主页；
从“./Title”导入标题；
从“./Collection”导入集合；
类应用程序扩展了React.Component{
建造师（道具）
{
超级（道具）；
这个州=
{
文本：“”，
收藏：[]
}
this.eventHandler=this.eventHandler.bind（this）；
this.eventSubmit=this.eventSubmit.bind（this）；
}
事件处理程序（事件）
{
这是我的国家(
{text:event.target.value}
)
}
事件提交（事件）
{
这是我的国家(
{collection:this.state.collection.concat（this.state.text）}
)
}
render（）{
返回(
拉梅什
{this.state.text}

);
}
}
导出默认应用程序；

Collection.js

从“React”导入React，{Component}；
类集合扩展了React.Component
{
render（）
{
报税表（
{this.props.name.toString（）}
);
}
}
导出默认集合；