示例场景

Question

我正在尝试使用ReactJS禁用和启用文本字段。

场景是：

用户输入文字，然后按Enter
必须禁用文本字段以防止输入新数据
文本已发送到服务器进行保存
保存后，必须再次启用文本框。

问题在于，在ReactJS中的单个事件中无法通过import UIKit class CustomTableViewCell: UITableViewCell { @IBOutlet weak var innerCollectionView: UICollectionView! override func awakeFromNib() { super.awakeFromNib() // Initialization code } override func setSelected(_ selected: Bool, animated: Bool) { super.setSelected(selected, animated: animated) // Configure the view for the selected state } }函数两次更新字段，因为它仅在完成相关事件后才更新一次。那么，如何在事件期间两次更新输入字段？

我还尝试了在每个setState之后使用this.forceUpdate()，但是没有用。

this.setState(...)

我正在寻找一种在活动期间禁用和启用所需字段的方法。

Answer 1

这应该为您工作。您无需强制更新状态。另外，您不能显式调用componentDidMount方法。它只执行一次，而在组件最初安装时也隐式执行。

theEvent(e){
            if(e.key==='Enter'){
                this.setState({
                  newTypePredefinedValue: '',
                  readOnly:true,
                  value:e.target.value
                });


                fetch(...,
                {
                    ...
                })
                .then(()=>{
                  this.setState({readOnly:false})
                 })

            }else{
              this.setState({
                value:e.target.value
              })
            }
        }

Answer 2

请注意，您正在使用

.then(this.setState({readOnly:false}))

代替

.then(() => this.setState({readOnly:false}))

这将导致第二个setState被立即调用，而不是在响应到达并由您处理时调用。

您也不需要打{{1}}。

示例场景

Codepen

forceUpdate

您的功能代码如示例代码所示重写。

class Element extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      readOnly: false,
      input: '',
    }

    this.handleFetch = this.handleFetch.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }

  handleInput(e) {
    this.setState({
      input: e.target.value
    });
  }

  handleFetch(e) {
    e.preventDefault();

    this.setState({
      readOnly: true
    });

    setTimeout(() => {
      this.setState({
        readOnly: false
      })
    }, 4000);

    /* You should use in your actual code

    fetch(..., { ... })
      .then(res => {
        // Handle response

        this.setState({
          readOnly:false
        })
      });

    */

  }

  render() {
    return (
      <div>
        <button onClick={this.handleFetch}>Click me!</button>
        <input type="text" disabled={this.state.readOnly} />
      </div>
    )
  }
}

Answer 3

为什么不创建输入ref并手动将其禁用。

看看下面的代码片段，可能会有所帮助：

const Form = () => {
  const [text, setText] = useState('');
  const inputRef = useRef(null);

  const handleSubmit = e => {
    e.preventDefault();

    inputRef.current.disabled = true;

    setTimeout(() => {
      inputRef.current.disabled = false;
    }, 3000);
  }

  return (
    <div>
      <h2>Form:</h2>
      <form onSubmit={handleSubmit}>
        <input ref={inputRef} onChange={e => setText(e.target.value)} value={text} />
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

我在这里使用钩子，但是您也可以使其与类一起使用。

如何在reactjs事件期间禁用和启用文本字段？

3 个答案:

示例场景