ant design 如何从 Button 组件的回调函数调用和修改 Input 的字符串？

Question

import React from 'react';
import { Input, Select, Button, Icon } from 'antd';

class Example extends React.Component {
  handleClick() {
    this.input.value = 'This is TextBox';
  }
  render() {
    return (
      <div>
        {/* <TextBox ref={ref => this.textBox = ref}/> */}
        <Input ref={ref => this.input = ref} />
        <Button onClick={this.handleClick.bind(this)}>搜索</Button>
      </div>
    );
  }
}
export default Example;

如果是用 ant-design 的 Input 和 Button，上面的 handleClick 函数不能改变 Input 的值。
但是如果用的原生的 input 上面的函数是可以改变的。
请问其他的组件标签如何获取到 ant-design 的 Input？

Answer 1

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    }
  }
  handleChange(e) {
    this.setState({
        value: e.target.value
    })
  }
  handleClick() {
    this.setState({
        value: 'This is TextBox'
    })
  }
  render() {
    return (
      <div>
        <Input value={this.state.value} onChange={(e) => this.handleChange(e)} />
        <Button onClick={() => this.handleClick()}>搜索</Button>
      </div>
    );
  }
}

Answer 2

入坑姿势不正确，你的方式是典型的命令式，问题与antd没有关系，还是得从react基础搞起，State Controlled Components