Question

我将antd与React一起使用，并具有以下代码：

<Tabs  type="card">
  <TabPane tab="Summary" key="1">
    <TextArea name="Name" 
              rows={4} 
              style={{marginBottom: '10px'}} 
              defaultValue={"DefaultValue"}/>     
  </TabPane>
  <TabPane tab="Description" key="2">
    <TextArea name="Name" 
              rows={4} 
              style={{marginBottom: '10px'}}           
              defaultValue={"DefaultValue"}/>
  </TabPane>
</Tabs>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在defaultValue道具中，我从道具渲染值。但是只有第二个文本区域呈现我从props发送的值，而第一个TextArea保持空白。如果我设置值而不是defaultValue，那么它可以工作，但是我无法编辑其中的文本。有什么问题吗？

Answer 1

这里有两件事-为了能够编辑value，您需要实现onChange处理程序，并更新组件的状态。其次，您应该对textAreas进行不同的命名（当前它们都具有相同的名称）。

每official Documentation：

在React渲染生命周期中，表单元素上的value属性将覆盖DOM中的值。对于不受控制的组件，您通常希望React指定初始的value，而使后续更新不受控制。要处理这种情况，您可以指定defaultValue属性而不是value。

话虽如此，使您的组件处于受控状态意味着实现onChange处理程序并设置其state。

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      first: "First Default Value",
      second: "Second Default Value"
    };

    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  render() {
    return (
      <div className="App">
        <Tabs type="card">
          <TabPane tab="Summary" key="1">
            <TextArea
              name="first"
              rows={4}
              style={{ marginBottom: "10px" }}
              value={this.state.first}
              onChange={this.onChange}
            />
          </TabPane>
          <TabPane tab="Description" key="2">
            <TextArea
              name="second"
              rows={4}
              style={{ marginBottom: "10px" }}
              value={this.state.second}
              onChange={this.onChange}
            />
          </TabPane>
        </Tabs>
      </div>
    );
  }
}

Live example

Answer 2

由于您没有onChange处理程序，因此您似乎无法编辑其中的文本。

您可以了解value和defaultValue here之间的区别。

antd UI Toolkit中的Tabs组件中的TextArea和文本未呈现

2 个答案: