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

Question

我正在进行“更新任务”活动，由于从this.props.location.state.****.衍生而来，因此我无法在文本框中编辑内容

请提出建议。我如何使其保持可编辑状态。

代码：

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

Answer 1

这是正常现象，因为当您在反应中提供有价值的支持时。

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

因此，由于您在编辑文本区域时道具的值不会更改，因此提供的值始终相同。

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

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

install_name_tool

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

并在文本区域上添加onChange事件以更新tskDescr

Answer 2

您需要使用onChange更改文本区域的状态值，如下所示     

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

然后

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

Answer 3

如果要更改值，则道具是不可变的使用状态，添加状态后，需要提供一个侦听器，以便可以更改值。

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

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