javascript - 通过另一个类更改类字符串变量 - 不工作

Question

问题:我想按下“Manipulator”类按钮以将 ChangeValue 的值变量更改为 Manipulator 的 manipulatorName 值，但这并没有发生。我做错了什么？

我有一个用空字符串名称初始化的类(称为 ChangeValue)。我这样做是因为它现在在网站上显示为“空”。但是，当我单击另一个类(称为 Manipulator)时，它应该更改 ChangeValue，但这并没有发生。 ChangeValue 的值始终设置为“空”，尽管我单击了该按钮。

我的代码:

export class ChangeValue extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: " "
        };
    }
    render() {
        var currentValue = null;
        if (this.value == null) {
            currentValue = "Empty"
        } else {
            currentValue = this.value
        }
        return (
            currentValue
        )
    }
}

export class Manipulator extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            manipulatorName: "New Value"
        };
        this.handleClick = this.handleClick.bind(this);
    }
    render() {
        return (
            <button onClick = {this.handleClick}>
        <ChangeValue value = {this.state.manipulatorName} />
            </button>
        )
    }
}

我的“ChangeValue 值”行基于我从 Stack 中读取的内容，可能父/子也存在问题？

Answer 1

关于为什么它不起作用，这里发生了一些事情。

您可以清理您的 ChangeValue 组件，因为它实际上不使用任何状态。它只需要使用从 Manipulator 传递给它的 prop 的值，因此可以转换为基于无状态“哑”函数的组件。

function ChangeValue(props) {
    return props.value || "Empty"
}

或者，如果您仍然希望它作为一个类，以便稍后添加一些状态...

export class ChangeValue extends React.Component {
    render() {
        return this.props.value || "Empty"
    }
}

这些都将具有相同的输出。如果它是 truthy，它们将返回 props.value 的值, OR (||) 如果 props.value 为 falsy，则返回单词“Empty” .

Manipulator 类也需要一些工作。它目前设置了一个handleClick 方法但没有定义它。它应该看起来像这样......

export class Manipulator extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          manipulatorName: undefined
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({
             manipulatorName: "New Value After Click"
        });
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                <ChangeValue value={this.state.manipulatorName} />
            </button>
        );
    }
}

由于 manipulatorName 是 *falsy*，因此最初将呈现一个带有文本“Empty”的按钮。单击按钮后，按钮文本应更改为“单击后的新值”。

我希望这对您有所帮助，如果它与您想要实现的目标不太相符，请发表评论或使用更多详细信息更新问题。

更新

这是一个working example on CodeSandbox .