Question

class Filter extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
       placeholder: true,
       variableValue: '',
      }
   }
  render() {
    return (
     <input placeholder={this.state.placeholder ? "select filter" : this.state.variableValue} />
  )
 }}

现在，只要变量输入从另一个位置定义的某个功能进入状态。如果变量的状态中有一些值，我想更改占位符的值。

有什么方法可以一线完成

Answer 1

最好只使用一个状态变量，如果未设置该变量，则使用默认值。

class Filter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            placeholder: null,
        };
    }
    render() {
        return <input placeholder={this.state.placeholder || 'select filter'} />;
    }
}

Answer 2

我不太确定为什么要尝试将价值放在占位符中，但是正确的方法是：

class Filter extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
       //placeholder: true,
       variableValue: '',
      }
      this.changeValue=this.changeValue.bind(this)
   }
  changeValue(event){
     this.setState({variableValue:event.target.value})
   }
  render() {
    return (
     <input placeholder="select filter"  value={this.state.variableValue} onChange={changeValue} />
  )
 }}

在这里，我们声明输入字段的值为状态variableValue，并定义一个方法来处理此输入字段中的所有更改。

在react的输入标签中添加状态变量值

2 个答案: