reactjs - 使用map函数为this.state数组中的每个对象渲染文本框。我如何处理文本区域中的文本

Question

在此先感谢您的帮助。

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

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

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>
                        <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={() => this.sendResponse(message._id, userId, message.sender)} />
                        </Form>
                        <Divider horizontal><Icon name="comments"></Icon></Divider>
                    </Comment.Group>

                )}


            </GFGContainer>

        );
    }
}

export default Messages;

Answer 1

  <Form.Input 
value={this.state.responseMessage} 
onChange={this.handleInputChange} 
name="responseMessage" />

这个问题在这里，您 map 中的所有 Form.Input与 name具有相同的 value和相同的属性

您需要名称是动态的，例如:

name={message._id}

您的状态应如下所示:

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

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

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

将动态生成 responseMessage的属性

然后最后将 value更改为

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

我认为这应该工作