Reactjs 使用映射函数为此.state数组中的每个对象呈现文本框。如何处理文本区域中的文本

提前感谢你的帮助

我的React应用程序中有一个消息组件。我正在查询数据库以获取消息，并将它们填充到组件的状态

在我的组件中呈现消息时，我正在使用映射函数。除了呈现消息之外，我还为每条消息添加了一个回复文本区域。我正在尝试使用handleInputChange和设置状态来捕获响应消息。但是，我的应用程序中的所有文本区域都会显示此消息

类消息扩展组件{
建造师（道具）{
超级（道具）；
this.loadMessages=this.loadMessages.bind（this）；
此.state={
信息：[]，
响应消息：“”，
displayReplyBox:false
}
}
componentDidMount（）{
log（“来自组件安装的道具”，this.Props）；
这是loadMessages（）；
}
handleInputChange=（事件）=>{
常量{name，value，}=event.target；
这是我的国家({
[名称]：值，
});
};
loadMessages=（）=>{
log（“UserID是”，this.props.UserID）；
API.getMessages（this.props.userId）
。然后（res=>{
this.setState（{messages:res.data}）；
console.log（this.state.messages）
})
.catch（错误=>{
console.log（错误）
});
}
render（）{
const{isLoggedIn，userId，email，zipCode}=this.props；
log（“用户仪表板中的道具”，this.props）；
如果（！isLoggedIn）{
返回
}
返回(
我的留言
{this.state.messages.map（message=>
{message.senderName}：
{message.message}
this.sendResponse（message.\u id，userId，message.sender）}/>
)}
);
}
}
导出默认消息
你的州应该是这样的：

  this.state = {
        messages: [],
        responseMessage: {},
        displayReplyBox: false
    }

然后在
handleInputChange
中，您可以更改此部分：

this.setState((prevState) => ({
  ...prevState,
  responseMessage: {
    ...prevState.responseMessage,
    [name]: value,
  },
}));

将动态生成
响应消息的属性

然后最后将
值更改为

value={this.state.responseMessage[message._id] || ""}

我认为这应该可以
您需要动态设置
的名称

将名称设置为
message.\u id
并从
中读取输入值。状态为[message.\u id]

如果您想在同一组件级别上求解，则必须添加与消息长度相同的输入数组（如果有嵌套字段，则长度更长）

更简单的替代方法是将回复分解为不同的组件：

class Reply extends Component {
  state = {
    responseMessage: "",
  };
  handleInputChange = (value) => {
    this.setState({
      responseMessage: value,
    });
  };
  render() {
    const { onSend } = this.props;
    <Form reply>
      <Form.Input
        value={this.state.responseMessage}
        onChange={this.handleInputChange}
        name="responseMessage"
        placeholder="Enter your response"
      />
      <Button
        content="Send Message"
        labelPosition="left"
        icon="edit"
        color="teal"
        onClick={() => onSend(this.state.responseMessage)}
      />
    </Form>;
  }
}

class Messages extends Component {
  constructor(props) {
    super(props);
    this.loadMessages = this.loadMessages.bind(this);
    this.state = {
      messages: [],
      responseMessage: "",
      displayReplyBox: false,
    };
  }

  componentDidMount() {
    console.log("Props from component mount", this.props);
    this.loadMessages();
  }

  handleInputChange = (event) => {
    const { name, value } = event.target;
    this.setState({
      [name]: value,
    });
  };

  loadMessages = () => {
    console.log("UserID IS", this.props.userId);
    API.getMessages(this.props.userId)
      .then((res) => {
        this.setState({ messages: res.data });
        console.log(this.state.messages);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  render() {
    const { isLoggedIn, userId, email, zipCode } = this.props;
    console.log("props in user dashboard", this.props);
    if (!isLoggedIn) {
      return <Redirect to="./Login" />;
    }
    return (
      <GFGContainer>
        <Header textAlign="center" color="teal" size="huge">
          My Messages
        </Header>

        {this.state.messages.map((message) => (
          <Comment.Group key={message._id}>
            <Comment fluid>
              <Comment.Content>
                <Comment.Author as="a">{message.senderName} : </Comment.Author>
                <Comment.Metadata></Comment.Metadata>
                <Comment.Text>{message.message}</Comment.Text>
              </Comment.Content>
            </Comment>
            <Reply onSend={(newMessage) => this.sendResponse(message._id, userId, message.sender, newMessage)} />
            <Divider horizontal>
              <Icon name="comments"></Icon>
            </Divider>
          </Comment.Group>
        ))}
      </GFGContainer>
    );
  }
}

export default Messages;


类回复扩展组件{
状态={
响应消息：“”，
};
handleInputChange=（值）=>{
这是我的国家({
回应信息：价值，
});
};
render（）{
const{onSend}=this.props；
onSend（this.state.responseMessage）}
/>
;
}
}
类消息扩展组件{
建造师（道具）{
超级（道具）；
this.loadMessages=this.loadMessages.bind（this）；
此.state={
信息：[]，
响应消息：“”，
displayReplyBox:false，
};
}
componentDidMount（）{
log（“来自组件安装的道具”，this.Props）；
这是loadMessages（）；
}
handleInputChange=（事件）=>{
常量{name，value}=event.target；
这是我的国家({
[名称]：值，
});
};
loadMessages=（）=>{
log（“UserID是”，this.props.UserID）；
API.getMessages（this.props.userId）
。然后（（res）=>{
this.setState（{messages:res.data}）；
console.log（this.state.messages）；
})
.catch（（错误）=>{
控制台日志（err）；
});
};
render（）{
const{isLoggedIn，userId，email，zipCode}=this.props；
log（“用户仪表板中的道具”，this.props）；
如果（！isLoggedIn）{
返回；
}
返回(
我的留言
{this.state.messages.map（（message）=>(
{message.senderName}：
{message.message}
this.sendResponse（message.\u id，userId，message.sender，newMessage）}/>
))}
);
}
}
导出默认消息；

现在，您的每个回复组件都有独立的状态，该状态会自行更新
您需要显示一些代码，以便人们理解您的问题。Comment.Group是否有状态？如果是，您是否将回复消息设置为该级别的状态？最终，你需要给每个群体一个独立的状态。
value={this.state.responseMessage[message._id] || ""}

class Reply extends Component {
  state = {
    responseMessage: "",
  };
  handleInputChange = (value) => {
    this.setState({
      responseMessage: value,
    });
  };
  render() {
    const { onSend } = this.props;
    <Form reply>
      <Form.Input
        value={this.state.responseMessage}
        onChange={this.handleInputChange}
        name="responseMessage"
        placeholder="Enter your response"
      />
      <Button
        content="Send Message"
        labelPosition="left"
        icon="edit"
        color="teal"
        onClick={() => onSend(this.state.responseMessage)}
      />
    </Form>;
  }
}

class Messages extends Component {
  constructor(props) {
    super(props);
    this.loadMessages = this.loadMessages.bind(this);
    this.state = {
      messages: [],
      responseMessage: "",
      displayReplyBox: false,
    };
  }

  componentDidMount() {
    console.log("Props from component mount", this.props);
    this.loadMessages();
  }

  handleInputChange = (event) => {
    const { name, value } = event.target;
    this.setState({
      [name]: value,
    });
  };

  loadMessages = () => {
    console.log("UserID IS", this.props.userId);
    API.getMessages(this.props.userId)
      .then((res) => {
        this.setState({ messages: res.data });
        console.log(this.state.messages);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  render() {
    const { isLoggedIn, userId, email, zipCode } = this.props;
    console.log("props in user dashboard", this.props);
    if (!isLoggedIn) {
      return <Redirect to="./Login" />;
    }
    return (
      <GFGContainer>
        <Header textAlign="center" color="teal" size="huge">
          My Messages
        </Header>

        {this.state.messages.map((message) => (
          <Comment.Group key={message._id}>
            <Comment fluid>
              <Comment.Content>
                <Comment.Author as="a">{message.senderName} : </Comment.Author>
                <Comment.Metadata></Comment.Metadata>
                <Comment.Text>{message.message}</Comment.Text>
              </Comment.Content>
            </Comment>
            <Reply onSend={(newMessage) => this.sendResponse(message._id, userId, message.sender, newMessage)} />
            <Divider horizontal>
              <Icon name="comments"></Icon>
            </Divider>
          </Comment.Group>
        ))}
      </GFGContainer>
    );
  }
}

export default Messages;