从 this.props.location.state 派生时无法编辑文本框中的内容答案

【问题标题】：Not able to edit content in textbox when it is derived from this.props.location.state从 this.props.location.state 派生时无法编辑文本框中的内容
【发布时间】：2019-02-26 22:21:53
【问题描述】：

我正在处理更新任务活动，我无法编辑文本框中的内容，因为它源自 this.props.location.state.****.

请提出建议。我怎样才能让它保持可编辑状态。

代码：

<textarea ref="taskdescr" type="text" class="form-control" value={this.props.location.state.tskDescr} id="taskDesc"></textarea>

【问题讨论】：

stackoverflow.com/questions/46942476/…
textarea是在主组件还是其他子组件？

标签： javascript reactjs

【解决方案1】：

这是正常的，因为当你在 react 中提供 value 道具时。

文本区域将在每次渲染后获得您提供的值。

所以因为你的 props 的值在你编辑 textarea 时不会改变，所以提供的值总是一样的。

要使您的文本区域可编辑，您需要使用状态而不是道具。

如果我了解您想要做什么，您的状态可能看起来像网站

{
  tskDescr: '',
  proptskDescr: '',
}

当 proptskDescr 不等于 props.location.state.tskDescr 时，使用 getDerivedStateFromProps 并更新 tskDescr。

并在 textarea 上添加一个 onChange 事件来更新 tskDescr

【讨论】：

我也试过了，但它仍然是不可编辑的。
需要添加onChange事件来更新state的值
this.setState({tskDescr: e.target.value })} type="text" class="form-control" value={this.state.tskDescr} id="taskDesc">
非常感谢，特里斯坦。这就是我想要实现的东西。

【解决方案2】：

您需要使用 onChange 为 textarea 更改状态值，如下所示

constructor(props){
    super(props);
    this.state = {
        location: {
            tskDescr: ''
        }
    }
}

然后

handleChange = (event) => {
    this.setState({
        location: {
            tskDescr: event.target.value
        }
    });
}

【讨论】：

【解决方案3】：

props 是不可变的使用状态，如果你想改变值，在添加状态后你需要提供一个监听器以便你可以改变值。

<textarea
    value={this.state.text}
    onChange={this.handle}
/>

handle = ({target:{value}}) => this.setState({text:value});

【讨论】：