Question

我正在尝试完成挑战，这些是最后步骤：

5->呈现一个CharComponents列表，其中每个CharComponent都会收到一个不同的输入文本字母（在初始输入字段中）作为道具。

6->单击CharComponent时，应将其从输入的文本中删除。

第5步进行得很好，但我不明白为什么未呈现更新的textList。

App.js：

import React, { Component } from "react";
import "./App.css";

import Validation from "./ValidationComponent";
import Char from "./CharComponent";

class App extends Component {
state = {
    text: "",
    length: 0,
};

textHandler = (e) => {
    const text = e.target.value;
    const length = text.length;
    this.setState({ text: text, length: length });
};

deleteCharHandler = (index) => {
    const text = this.state.text.split("");
    text.slice(index, 1);
    const updatedText = text.join("");
    this.setState({ text: updatedText });
};
render() {
    const textList = this.state.text.split("").map((char, index) => {
    return (
        <Char
        letter={char}
        key={index}
        click={() => this.deleteCharHandler(index)}
        />
    );
    });

    return (
    <div className="App">
        <input type="text" onChange={this.textHandler} />
        <p>{this.state.length}</p>
        <Validation length={this.state.length} />
        {textList}
    </div>
    );
}
}

export default App;

CharComponent：

import React from "react";

import "./styles.css";

const charComponent = (props) => {
return (
    <div className="Char">
    <p onClick={props.click}>{props.letter}</p>
    </div>
);
};

export default charComponent;

ValidationComponent：

import React from "react";

import "./styles.css";

const validationComponent = (props) => {
let message = "";
if (props.length < 5 && props.length !== 0) message = "Text is too short!!!";
if (props.length > 18) message = "Text is long enough!!!";
return (
    <div>
    <p>{message}</p>
    </div>
);
};

export default validationComponent;

Answer 1

在deleteCharHandler中，您使用的是slice而不是splice。

为什么未渲染我的updatedText组件？

1 个答案: