Question

我有这个课程，它是列表中的特定条目。
我正在尝试将语义用户界面反应的TextArea用作受控组件。
当外部事件（更改所选语言）触发componentWillReceiveProps方法时，处于状态的数据对象将使用新数据进行更新。
但是，设置为this.state.value的TextArea的呈现值永远不会更改。
我已经验证了状态实际上是新值，但是我不明白为什么呈现的值不会更改。

import React, { Component } from "react";
import { Segment, Grid, Button, TextArea, Form } from 'semantic-ui-react'

const UNAVAILABLE = "Translation unavailable."

class Key extends Component {

    constructor(props) {
        super(props)
        this.state = {
            data: props.data[props.language]
        }
    }

    componentWillReceiveProps = (props) => {
        this.setState({
            data: props.data[props.language]
        })
    }

    handleEdit = (event) => {
        this.setState({data: event.target.value})
        this.props.edit(event.target.value)
    }

    render = () => {
        let inverted = null;
        let color = null;
        if(this.props.hasChanged()){
            inverted = true;
            color = 'green'
        } else if(!this.props.data[this.props.language]) {
            inverted = true;
            color = 'red'
        }

        return(
            <Segment className='key' inverted={inverted} color={color}>
                <Grid columns='equal' textAlign='left'>
                    <Grid.Row>
                        <Grid.Column className='keyField' width={3}>
                            {this.props.name}
                        </Grid.Column>
                        <Grid.Column width={5}>
                            {this.props.data.en}
                        </Grid.Column>
                        <Grid.Column width={5}>
                            <Form>
                                <TextArea
                                    value={this.state.data} 
                                    placeholder={UNAVAILABLE}
                                    onChange={this.handleEdit}>
                                </TextArea>
                            </Form>
                        </Grid.Column>
                        <Grid.Column>
                            <Button
                                className='button'
                                floated='right' 
                                icon='trash alternate' 
                                compact
                                onClick={this.props.delete}
                            />
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Segment>
        )
    }
}

export default Key;

解决方案：真正的问题是我的数据对象的data [language]值最终未定义。我期望它采用空值并返回到占位符，但是显然，当您将null赋予具有值的textArea的value字段时，它什么都不做，如github.com/facebook/react/issues/ 2533。添加检查属性是否在数据对象中，并使用空字符串来解决我的问题。

Answer 1

您可以验证它是否对我有用

import React, { Component } from "react";
import { Segment, Grid, Button, TextArea, Form } from 'semantic-ui-react'

class AboutPage extends React.Component {
  constructor(){
    super();
    this.state={
      data:"initial data"
    }
  }
  componentDidMount(){
    setTimeout(()=>{
      this.setState({data: 'new Data'})
    }, 5000)
  }
  render() {
    return (
      <div>
        <h1>About</h1>

        <Key data={this.state.data}/>
      </div>
    );
  }
}



const UNAVAILABLE = "Translation unavailable."

class Key extends Component {

    constructor(props) {
        super(props)
        this.state = {
            data: props.data
        }
    }

    componentWillReceiveProps = (props) => {
        this.setState({
            data: props.data
        })
    }

    handleEdit = (event) => {
        this.setState({data: event.target.value})
        // this.props.edit(event.target.value)
    }

    render = () => {
        let inverted = null;
        let color = null;
        if(true){
            inverted = true;
            color = 'green'
        } else if(!this.props.data[this.props.language]) {
            inverted = true;
            color = 'red'
        }

        return(
            <Segment className='key' inverted={inverted} color={color}>
                <Grid columns='equal' textAlign='left'>
                    <Grid.Row>
                        <Grid.Column className='keyField' width={3}>
                            {'name'}
                        </Grid.Column>
                        <Grid.Column width={5}>
                            {'English'}
                        </Grid.Column>
                        <Grid.Column width={5}>
                            <Form>
                                <TextArea
                                    value={this.state.data} 
                                    placeholder={UNAVAILABLE}
                                    onChange={this.handleEdit}>
                                </TextArea>
                            </Form>
                        </Grid.Column>
                        <Grid.Column>
                            <Button
                                className='button'
                                floated='right' 
                                icon='trash alternate' 
                                compact
                            />
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Segment>
        )
    }
}

export default AboutPage;

道具更新时，使用语义TextArea进行反应，不更新值

1 个答案: