Question

在我下面的代码中。我有最初为空的初始状态值（公共状态下的标记和值）。这些值当前根据 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,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 是 { {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

Answer 2

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

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

2 个答案:

更新