如何设置 reactjs select 选项的默认值并将其用作初始状态

Question

在我下面的代码中。我有最初为空的初始状态值（public 状态下的标签和值）。这些值当前根据 react select 选项（handlechange 和 handletagchange class）更改。但是，我也从上游 streamlit 应用程序获取一些输入值，我想使用这些值来设置状态的初始值，即 'value' :(init_value) 和 'tag' ： (firsttag) - （请参考 public 渲染后的变量）。然后我想根据反应 select 中的 selection 更改这些默认更改（处理更改和处理标签更改）。有人可以帮忙怎么做吗？

import {
  Streamlit,
  StreamlitComponentBase,
  withStreamlitConnection,
} from "streamlit-component-lib"
import React, { ReactNode } from "react"
import {TokenAnnotator, TextAnnotator} from 'react-text-annotate'
//import _ from 'lodash'
//import { Label } from 'semantic-ui-react'


const Card = ({children}:any) => (
  <div
    style={{
      boxShadow: '0 2px 4px rgba(0,0,0,.1)',
      margin: 6,
      maxWidth: 500,
      padding: 16,
    }}
  >
    {children}
  </div>
)

/**
 * This is a React-based component template. The `render()` function is called
 * automatically when your component should be re-rendered.
 */

class NlpAnnotate extends StreamlitComponentBase {
  
  public state = {value: [], tag: ''}
 
  handleChange = (value:any) => {
    this.setState({value})
  }

  handleTagChange = (e:any) => {
    this.setState({tag: e.target.value})
  }
  
  public render = (): ReactNode => {
  
    const TEXT = this.props.args["text"]
    const options = this.props.args["options"]
    const init_value:any = []
    var first = options[0]
    const firsttag = first.value
    
    
    const TAG_COLORS:any = {};
    for (var i = 0; i < options.length; i++) {TAG_COLORS[options[i].label] = options[i].color;}
    
    return (
        <div style={{padding: 24, fontFamily: 'IBM Plex Sans'}}>
        <div style={{display: 'flex', flexDirection: 'column', marginBottom: 24}}>
          <Card>
            <h4>Text for annotation</h4>
            <select onChange={this.handleTagChange} value={this.state.tag}>
                {options.map((option:any) => (
                <option value={option.value}>{option.label}</option>
                ))}
            </select>
            <TextAnnotator
              style={{
                fontFamily: 'IBM Plex Sans',
                maxWidth: 500,
                lineHeight: 1.5,
              }}
              content={TEXT}
              value={this.state.value}
              onChange={this.handleChange}
              getSpan={(span:any) => ({
                ...span,
                tag: this.state.tag,
                color: TAG_COLORS[this.state.tag],
              })}
            />
          </Card>
        </div>
        
        <Card>
          <h4>Json String</h4>
          <pre>{JSON.stringify({TEXT},null,2)}</pre>
          <pre>{JSON.stringify(this.state.value, null, 2)}</pre>
        </Card>
        <button
            onClick={() => Streamlit.setComponentValue(JSON.stringify(this.state.value, null, 2))}
        >
        save
        </button>
      </div>
    )
  }
}

// "withStreamlitConnection" is a wrapper function. It bootstraps the
// connection between your component and the Streamlit app, and handles
// passing arguments from Python -> Component.
//
// You don't need to edit withStreamlitConnection (but you're welcome to!).
export default withStreamlitConnection(NlpAnnotate)

Answer 1

我相信你只需要实现 componentDidUpdate 生命周期组件。

init_value 似乎只是您在 render 中声明的局部变量，它已经等于 this.state.value 值且未使用，但我看到 firsttag是 this.props.args.options[0].value.

public componentDidUpdate = (prevProps): void => {
  // check first tag
  if (
    prevProps.args.options?.[0]?.value !== this.props.args.options?.[0]?.value &&
    this.props.args.options?.[0]?.value
  ) {
    this.setState({
      tag: this.props.args.options[0].value,
    });
  }
  // other arg checks
};

更新

因为 Stramlit 似乎扩展了 React.PureComponent class and overrides the componentDidUpdate method，您可能需要在覆盖的方法签名中工作，并且只需从范围内的当前道具访问 args。

public componentDidUpdate = (): void => {
  // After we're updated, tell Streamlit that our height may have changed.
  Streamlit.setFrameHeight();

  // Attempt to update state with first tag
  this.setState({
    tag: this.props.args.options?.[0]?.value,
  });
};

Answer 2

我已经通过如下更改 public 状态解决了这个问题：public state = {value: this.props.args["init_value"], tag: this.props.args.options?.[0]?.value}

如何设置 reactjs select 选项的默认值并将其用作初始状态

how to set default value of a reactjs select option and use that as intial state

reactjs

react-select

react-state

streamlit

更新