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

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

在我下面的代码中。我有最初为空的初始状态值（公共状态下的标记和值）。这些值当前根据 react 选择选项（handlechange 和 handletagchange 类）而变化。但是，我也从上游流光应用程序获取一些输入值，我想使用这些值来设置状态的初始值，即“值”:(init_value) 和“标签”:(firsttag) -（请参阅公共渲染后的变量）。然后我想根据反应选择（句柄更改和句柄标签更改）中的选择更改这些默认更改。有人可以帮助如何做到这一点吗？

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,.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',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,2)}</pre>
        </Card>
        <button
            onClick={() => Streamlit.setComponentValue(JSON.stringify(this.state.value,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)

解决方法

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

init_value 似乎是您在 render 中声明的局部变量，它已经等于 this.state.value 值并且未使用，但我看到 firsttag 是 { {1}}。

this.props.args.options[0].value

更新

由于 Stramlit 似乎扩展了 React.PureComponent class and overrides the componentDidUpdate method，因此您可能需要在覆盖的方法签名中工作，并且只需从范围内的当前道具访问 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 }; 。

args

,

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